m3u8测试地址_rtmp、m3u8直播小记

最近项目做跟视频有关的，一个是直播，一个是播放视频。使用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=""