集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决

2020-04-23 16:45:07 浏览数 (1)

EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等。EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发,集 rtmp,hls,flv,websocket 于一身的网页直播/点播播放器。

引用videojs无法自动播放问题

很多的流媒体视频H5网页播放使用的是videojs来进行的播放,而videojs本身自带的自动播放属性是需要通过添加autoplay()方法来完成视频播放的自动加载:

代码语言:javascript复制
	player = videojs("video", {
         autoplay: true,
    });

在制作四分屏的时出现给videojs添加autoplay()后,在一些浏览器上并不能完成自动播放,videojs加载完成后视频播放呈现出暂停样式:

但是这个问题在其他浏览器却不存在,在其他浏览器上是能够进行自动加载播放的。

为了解决这样的不兼容的问题,我们根据videojs最新的问题修复版本,设置一下更新后的swf版本:

代码语言:javascript复制
videojs.options.flash.swf = 'video-js-fixed.swf';

设置flash swf路径后,Video.js会在不支持html5的浏览中使用flash播放视频文件;

配合autoplay()就可以完成自动加载了播放;

实际上,采用video.js播放或者采用ckplayer、cyberplayer等播放器,在安防、流媒体、音视频领域,总会有一些局限,举个简单的例子,我们为了产品全平台、全终端的兼容,需要H5播放能同时支持RTMP、HTTP、HLS、HTTP-FLV、websocket等多种协议,同时,在安防等工业场景,重连还是必须的,例如RTMP重连、HTTP-FLV直播的重连、HLS(m3u8)直播的重连,这就不得不让我们基于videojs、flv.js、flash等做整合,于是有了EasyPlayer.js。

0 人点赞