解决 LiveQing 流媒体服务器videojs flash播放RTMP、HLS提示错误的问题

问题

LiveQing流媒体服务器可以输出HTTP-FLV 、Websocket-FLV、RTMP、HLS流,在做RTMP、HLS flash播放时候,经常会遇到网站flash被禁用的情况,每一次都会有用户跑来咨询是什么原因,我们就不厌其烦地告诉他原因,然后转发博客中的解决方法,对于这种重复而无意义的工作,我们要说No!

解决方案

于是我们就考虑,为啥我们用腾讯看直播的时候,没遇到过这种情况?我们的前端开发调研了一下腾讯视频的播放提示,我们发现,腾讯做到了专门对这种flash被异常禁用的情况的提示:
EasyDSS流媒体服务器

从上面可以看到,优秀的前端做了几部分的工作:

  1. 提示flash无法被启用;
  2. 点击flash会提示插件弹出被禁止;

基于以上参考,我们在LiveQing的videojs调用flash过程加了代码,当flash被禁用的时候,提示flash未安装或者被禁用:
在这里插入图片描述
参考代码:

<!-- 实际上, 只要将提示信息外包一个链接到 http://www.adobe.com/go/getflashplayer 浏览器就会在地址栏右侧提示开启Flash插件 -->

<a href='http://www.adobe.com/go/getflashplayer' target='_blank'>
	你的浏览器没有安装或开启Flash
</a>

LiveQing流媒体服务器

LiveQing采用业界优秀的流媒体框架模式设计,服务运行轻量、高效、稳定、可靠、易维护,支持RTMP直播、RTMP推送、HTTP点播、HLS直播,并支持关键帧缓冲,画面秒开等多种特性,能够接入WEB、Android、iOS、微信等全平台客户端,是移动互联网时代贴近企业点播/直播需求的一款接地气的流媒体服务器,配套OBS、LiveRTMP等直播推流工具以及LivePlayer等网络播放器,可以形成一套完整的视频直播、录播解决方案,满足用户在各种行业场景的流媒体业务需求。
1、转码管理服务:上传、转码一体化,多点同步转码,满足高强度、大数据量、多格式的视频转码工作,同时,转码管理服务器能够提供强大的分享和集成功能;
2、流媒体服务:高性能、大并发的流媒体服务器系统,该系统完全由C语言 编码实现,能够最大限度的挖掘硬件和网络的潜能,实现在一台普通服务器上支持超过3000个并发播出。系统支持HTTP、HLS、RTMP等播出协议,面向Windows、Android、iOS 、Mac等终端提供稳定流畅的直播、点播、时移、回看服务,广泛应用到互联网教学、互联网电视、IPTV、VOD、视频聊天和各种互联网直播点播应用中;
3、配套组件服务:LiveQing配套的推流及播放组件,充分完整地使整个LiveQing流媒体服务器解决方案形成了一个闭环,从直播流的生产,到分发,到播放,都得到了解决;
详情可以参看LiveQing流媒体服务器官方网站:www.liveqing.com

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在video.js播放RTMP流直播,需要使用video.jsrtmp插件。以下是一些步骤: 1. 首先,需要引入video.jsrtmp插件的js和css文件。 ```html <link href="//vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/7.6.6/video.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script src="//cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-eme/4.4.2/videojs-contrib-eme.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-dash/2.10.0/videojs-contrib-dash.min.js"></script> <script src="//cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-dash/2.10.0/videojs-contrib-dash.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script src="//unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-eme/4.4.2/videojs-contrib-eme.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script> <script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> ``` 2. 在video标签中添加data-setup属性,并在其值中定义rtmp插件。 ```html <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash", "html5"] }'> <source src="rtmp://example.com/path/to/stream" type="rtmp/mp4"> </video> ``` 3. 当使用rtmp流时,需要指定flash播放器的路径。 ```javascript videojs.options.flash.swf = "path/to/video-js.swf"; ``` 这样就可以在video.js播放RTMP流直播了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值