用video.js和windows自带播放插件MediaPlayer实现视频播放

由于本人在搜索资料没有找到video.js插件支持ie8的方法，所以在做查看视频的功能时想法是这样的，对于谷歌和IE10以上用video.js的方法实现，而IE9及IE8用MediaPlayer实现。下面是实现代码（只测试过mp4格式的）：

1.video.js实现

<html>  
<head>  
  <meta charset="utf-8">  
  <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">  
  <!-- If you'd like to support IE8 -->  
  <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> 
  <script src="http://vjs.zencdn.net/5.5.3/video.js"></script> 
  <style type="text/css">
	//暂停时显示播放按钮
	.vjs-paused .vjs-big-play-button,
	.vjs-paused.vjs-has-started .vjs-big-play-button {display: block;}
  </style>
</head>  
<body>    
 <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="300"  poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">  
	<source src="https://duolunstorage.oss-cn-hangzhou.aliyuncs.com/qingcloud/video/anquanxing/%E9%9B%BE%E4%B8%AD%E9%A3%8E%E6%99%AF.mp4" type="video/mp4"/>
    <!-- 如果上面的rtmp流无法播放，就播放hls流 -->  
     <source src="http://10.10.5.119/live/livestream.m3u8" type='application/x-mpegURL'>    
 </video>  

</body>  
</html>

说明：

（1）source标签的src的值即为视频文件路径

（2）video标签中的class="video-js"时，播放按钮在左上角，当class值设为文中所示时，播放按钮居中显示

（3）video标签中的poster存放照片路径，表示视频初始播放时的图片

（4）通过css实现-暂停时显示播放按钮，上面的代码中已写，

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {display: block;}

（5）想了解video.js使用技巧及属性可以参考文章

《video.js使用技巧》，《免费视频播放器videojs中文教程》，《视频播放插件Video.js》

2.通过MediaPlayer实现：

<object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="800"
height="600" standby="Loading Windows Media Player components…" type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
	<param name="FileName" value="https://duolunstorage.oss-cn-hangzhou.aliyuncs.com/qingcloud/video/anquanxing/%E9%9B%BE%E4%B8%AD%E9%A3%8E%E6%99%AF.mp4">
	<param name="AutoStart" value="true">
	<param name="ShowControls" value="true">
	<param name="BufferingTime" value="2">
	<param name="ShowStatusBar" value="true">
	<param name="AutoSize" value="true">
	<param name="InvokeURLs" value="false">
	<param name="AnimationatStart" value="1">
	<param name="TransparentatStart" value="1">
	<param name="Loop" value="1">
	<embed type="application/x-mplayer2" src=""
	name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1"
	showcontrols="1" loop="0" videoborder3d="0"                                               
	pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
	width="800" height="600"></embed> 
</object>

说明：name="FileName"的param标签的value属性值即为视频文件路径

3.通过js控制浏览器为IE8和IE9时用MediaPlayer实现，其他使用video.js实现,默认object标签不显示（下面代码还实现了视频大小和窗口大小一致，不需要的可以忽略）

resetWindowSize();
window.onresize=function(){
  resetWindowSize();
}
function resetWindowSize(){
	if(Ext.isIE8 || Ext.isIE9){
		document.getElementById("my-video").style.display="none"
		document.getElementById("MediaPlayer").style.display="block"
		var winWidth=getDetailWinWidth();
		var winHeight=getDetailWinHeight();
	    document.getElementById("MediaPlayer").style.width=(winWidth-10)+"px";
		document.getElementById("MediaPlayer").style.height=(winHeight-20)+"px";
	}else{
		var winWidth=getDetailWinWidth();
		var winHeight=getDetailWinHeight();
	    document.getElementById("my-video").style.width=(winWidth-10)+"px";
		document.getElementById("my-video").style.height=(winHeight-10)+"px";
	}
}
function getDetailWinHeight(){
    var winHeight
    //获取窗口高度
    if (window.innerHeight)
	  	winHeight = window.innerHeight;
	else if ((document.body) && (document.body.clientHeight))
	   	winHeight = document.body.clientHeight;
	if(Ext.isIE){
		 //通过深入Document内部对body进行检测，获取窗口大小
		 if (document.documentElement && document.documentElement.clientHeight){
		  	 winHeight = document.documentElement.clientHeight;
		 }
	 }
	 return winHeight;
}
function getDetailWinWidth(){
	var winWidth
	//获取窗口宽度
	if (window.innerWidth)
	  	winWidth = window.innerWidth;
	else if ((document.body) && (document.body.clientWidth))
	   	winWidth = document.body.clientWidth;
	if(Ext.isIE){
		//通过深入Document内部对body进行检测，获取窗口大小
		if (document.documentElement && document.documentElement.clientWidth){
		  	 winWidth = document.documentElement.clientWidth;
		}
	}
	return winWidth;
}

说明：上文中js代码中判断浏览器的方法用的是Ext.js自带的方法，没用此插件的可以参考下面文章判断浏览器的方法https://www.cnblogs.com/XCWebLTE/archive/2017/06/15/7017338.html

用video.js和windows自带播放插件MediaPlayer实现视频播放

猜你喜欢