用video.js和windows自帶播放外掛MediaPlayer實現視訊播放
阿新 • • 發佈：2018-12-17
由於本人在搜尋資料沒有找到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使用技巧及屬性可以參考文章
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;
}