videos播放rtmp流遇到的一些问题

不完美00 发表于 2019-03-29 12:48:58

- +

利用videos播放rtmp流遇到的一些问题

此处使用的是videojs的5.xx版本，尝试利用6.xx或者7.xx是播放不了rtmp流的，6以上的videojs版本默认取消了flash的支持，因此在项目中如果必须使用高版本，可以添加支持flash的js文件videojs-flash。

在项目中因为需要使用高版本来播放HLS，因此与5.xx版本冲突，所以我的解决办法是添加了：

<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script

tips:保证videojs和videocss是同一个版本。

a) The media could not be loaded, either because the server or network failed or because the format is not supported.

i. 遇到此问题时首先是在网上搜索报错的原因，看看有没有类似问题的解决办法，结果也是搜到的东西对我来说并没有什么用，因为我是在chrome浏览器报的错误，所以又下了firefox来测试，结果也是报同样的错误，然后用window自带的edge，很开心可以播放了，把连接地址发给朋友他们的chrome竟然可以播放，查看了下chrome的版本，跟我的chrome一模一样，唯一不同的是chrome的位数（所以以后的路就走偏了，把问题放到chrome位数上了），把连接给大佬试了下，也是可以播放的，把我的报错截图全部发给大佬，呵呵，一语惊醒梦中人，是我本地resource的http地址被篡改了，resource的src换成https，完美，能播放了。所以我这是播放源地址有误，找不到可以播放的源，才会报错。

b) "FLASH: rtmpconnectfailure"

i. 此问题是rtmp媒体资源有问题，按照网上搜到的可以播放的rtmp流地址大部分是不能播放的，此处放一个可以播放的源：韩国GoodTV,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

c) 利用videojs播放rtmp流用dem调试时 video标签属性preload=”auto”是可以自动播放的，放到弹框里面不能自动播放，设置preload="true"，js配置里面var myPlayer = videojs('my-video',{autoplay: true});可以播放

d) 切换播放源

videojs("my-video").ready(function() {
    var myPlayer = this;//要生成新的player对象
    myPlayer.src(url);// 切换播放源为url
    myPlayer.play();
});

e) 因为要点击不同的按钮显示不同的视频流，所以在每次关闭前一个视频的时候我的做法是myPlayer.dispose()，销毁，以防止占用资源，但是发现销毁之后再次获取video的时候会报错，其实销毁的时候video也会不存在了，所以在隐藏掉弹框时，myPlayer.pause()即可。不会影响点击其他按钮时视频的播放。（此处我做了一个处理是：因为只有一个弹框，每次点击都会有不同的源进行播放，在每次生成myPlayer的时候，放到一个数组里面，当弹框隐藏/消失的时候，把当前的myPlayer删除。个人觉得会有更好的办法来处理myPlayer，切换视频源不失为一个好的办法，待测试）。

f) 控制台报错No compatible source was found for this media.，是因为浏览器默认是禁止flash自动播放的，这时候需要开启允许flash，在chrome下询问也是不行的，必须保证flash是可用的，这里添加了一个判断flash是否禁用的代码，可以在页面上加上，开启flash

<a href="https://get.adobe.com/cn/flashplayer/"; class="flashLoadMsg" target="_blank">安装或者启用FLASH播放器</a>

g) 项目中使用videojs播放HLS时发现，当.m3u8文件不存在或者由于转流时的时间间隔会导致.m3u8文件短暂性报文件不存在的错误，后续即使有文件输出由于已经报错所以video也不会播放文件。通过搜索文章，得知videojs存在error事件，此事件绑定在生成的player对象中，因此在遇到error时可以在onPlayerReady方法中给player对象绑定error事件，进行错误处理

this.on('error',function(e){
    var _this = this;
    errLoad = setInterval(function() {
    clearInterval(errLoad);
    _this.src(url);
    _this.play();
    },3000);
 })//serInterval防止在下一次播放时还会出现报错现象

后续遇到问题，继续积累