阅读 2795

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=""

文章分类
前端
文章标签