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

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

标签: videojs, 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防止在下一次播放时还会出现报错现象


后续遇到问题,继续积累



possitive(2) negative(0) views1851 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本

    有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 更多...