由于项目后台需要播放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>节点下配置如下代码
到这里就结束了,效果如下: