最近项目做跟视频有关的，一个是直播，一个是播放视频。使用video标签。视频直播有很多协议，rtmp、rtsp、hls等就自己去了解，业务有做到就会了解一些。
公司经过软硬件测试，发现目前公司使用rtmp流直播延迟是最小的，rtmp需要flash，chrom在今年年底要完全禁止flash，不像现在是默认禁止还能允许。之前已经完善了老版本，由于重构版本是使用vue，于是又踩了一遍坑。之前有人说vuecli3使用videojs对于rtmp的播放会有问题，我就是使用vuecli3搭建的，是可以播放的。
先说说最容易出现的两个问题，第一个就是播放了，切换页面或者切换不同视频出现：
this .el_vjs_getproperty is not a function
具体怎么解释我不清楚，可以认为是切换地址的时候，使用的videojs插件需要清除上一个播放，使用dispose()方法；
另一个容易出现的问题：
The element or ID supplied is not valid
解释起来就是这个video标签的ID已经使用过，不支持再初始化。解决办法就是动态添加标签进去。
dispose会连同标签一起销毁。之前使用dispose方法报错，于是使用原生方法清除标签，然后动态注入，连id都要每次都不同。这次就简单多了，动态注入标签，id可以相同。
首先安装依赖：video.js、videojs-flash
然后在播放页面使用：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
测试了一下，videojs-flash是必须的。
附上两个方法：
//初始化视频
initVideo(){
this.destroyVideo();
let type = 'video/mp4';
if(xxx){
type = 'rtmp/mp4';
}
let videoEl = '<video v-if="playUrl" id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered"' +
'controls preload="auto" autoplay="autoplay" width="927px" height="647px">' +
'<source src="'+ this.playUrl +'" type="'+ type +'"/></video>';
document.querySelector('#videoWrap').innerHTML = videoEl;
this.myVideo= videojs('myVideo');
this.myVideo.on('error', () => {
this.videoErrorShow = true;
});
this.myVideo.play();
},
//销毁视频
destroyVideo(){
if(this.player!=null){
this.myVideo.dispose();
this.myVideo=null;
}
},
这边是有切换视频的，所以每次都要判断销毁，并且不只是播放rtmp，还判断mp4的情况。
移动端使用的是m3u8直播，需要安装一个新的依赖：videojs-contrib-hls
测试了一下，必须要有
播放页使用：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
原本老版本直接切换src就可以了，连videojs都没用，不知道为什么这个版本不行，于是跟PC方法一样，只是type对于m3u8是application/x-mpegURL
如果出现这个错误：
play() failed because the user didn't interact
浏览器现在自动播放限制了，除非你加上静音muted，但是直播却可以自动播放。
期间还有另外的一些问题，现在也重现不了，主要是有些问题也不知道为什么就解决了，m3u8和mp4还会出现跨域问题，我这边是nginx加允许头header。当然，如果做rtmp的直播，flash这个需要设置允许就不用多提了，甚至要做判断等。如果做的是局域网，还需要下载video-js.swf并手动引入。
对于videojs其实完全不懂，个人觉得api也很乱。目前只能是拿来实现功能。如果有遇见相同问题的，使用上面的试试，并不敢保证一定能行。最后再提一嘴之前分享过的，移动端视频播放不全屏：
x5-playsinline="" playsinline="" webkit-playsinline=""
image
网友评论