由於項目后台需要播放m3u8視頻,但此視頻格式在移動端和Safari支持比較友善但是PC瀏覽器中都不太盡如人意,所以想在Chrome中播放只能借助第三方插件來播放.
有一款Video.js插件極大的簡化前端視頻的處理
優點
- 免費開源，可以在Github上獲取它的最新代碼 vidoe.js
- 簡單易用getting-started
- 幾乎兼容所有瀏覽器，自動判斷是使用H5還是使用flash播放
- 界面可以自定義，純javascript和css打造，說明文檔也非常的詳細
第一步:引入Video.js和video.css
這里我們用遠程資源
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
由於m3u8視頻的播放還需要額外插件videojs-contrib-hls.js才可支持,所以再引入videojs-contrib-hls.js即可
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
第二步:加入video標簽
<video id="my_video_1" class="video-js vjs-default-skin fillWidth" controls width="640" height="268"data-setup='{}'> <source src="http://10.57.180.133/coil/_definst_/0/0/0/000000000269_app.smil/playlist.m3u8" type="application/x-mpegURL"> </video>//如果不用videojs手動啟用,那黃色部分代碼是必須要有的,否則video.js無法找到該作用於哪個對象導致將失效
試過視頻是在iframe中,由於iframe的安全機制,必須稍許設置才可正常全屏功能.
第四步:iframe允許全屏
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" width='100%' height='98%' scrolling='no' frameborder='0' src='..............'></iframe>
只要包含了視頻的iframe全都要加黃色背景代碼才可正常全屏.
由於利用了第三方js輔助播放視頻,不可避免的video.js會用腳本的方式請求資源在做處理,由於視頻資源往往是另一台服務器,所以這里涉及到跨域問題,所以要保證視頻資源是允許跨域訪問的.
第五步:允許服務器跨域
這里用.net跨域舉例:
在<system.webServer>節點下配置如下代碼
到這里就結束了,效果如下:
