videos播放rtmp流遇到的一些问题
利用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防止在下一次播放时还会出现报错现象
后续遇到问题,继续积累
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...