基于flv.js的视频自动播放

1: html

<video class="video-content" id="video">您的浏览器不支持 HTML5 video！
</video>

2: 创建flv实例并播放

let videoPlayer = document.getElementById('video'); //获取html
if (flvJs.isSupported()) {//创建flv实例this.Player = flvJs.createPlayer({//MediaDataSourcetype: 'flv',hasAudio: false, //是否带音频播放isLive: true, //<====加个这个url: 'url'}, {//ConfigenableWorker: false, enableStashBuffer: false//当带音频播放时,config部分配置项尽量采取默认状态,否则过分优化会造成卡死});this.Player.attachMediaElement(videoPlayer);this.Player.load(); //加载this.Player.play(); //播放
}

3:停止播放

this.Player.pause(); //停止播放
this.Player.unload(); //停止加载
this.Player.detachMediaElement(); //销毁实例
this.Player.destroy();
this.Player= null;

4:由于累积延过大时,跳帧播放问题

可以设置一个定时器指定时间跳帧, 时间不可过大或过小,容易造成卡顿和画面衔接过于突兀

setInterval(() => {this.jumpToEndBuffer();
}, 60 * 1000);
jumpToEndBuffer(){let buffered = this.Player.buffered;if (buffered.length > 0) {let end = buffered.end(0);if (end - this.Player.currentTime > 0.2) {this.Player.currentTime = end - 0.1;}}
}

5: 关于同时播放多路视频问题(6路以上)

用websocket播放六路以上视频, 需后端将视频的URL单独设置端口, 谷歌浏览器最大可进行6路长链接(浏览器请求并发), 如果想要请求第七路会造成请求阻塞, (由于打包后的js文件按需加载, 会造成js文件请求等待, 页面卡死 )

6: 页面花屏绿屏问题

浏览器的版本过低会造成绿屏, 建议升级浏览器版本

视频码流问题, 建议后端排查

7: 流跨域问题

后端做了处理,前端未作深入研究

8: 带音频播放黑屏问题

原因是由于音频和视频时间戳不同步，flvjs的config中fixAudioTimestampGap属性默认是true使音视同步，修改为false即可

扩展如果做手动点击播放,可用html5中video标签的方法,如v-on:pause="";v-on:play="";

基于flv.js的视频自动播放相关推荐

javascript模拟点击事件--实现视频自动播放
背景这两年一直在做浏览器开发相关的工作,我们所做的浏览器禁用了视频自动播放功能,以实现视频预加载功能:浏览器在视频播放时为了实现视频秒开效果(就是一点击页面里的播放按钮就立即开始播放,而不 ...
uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...
详解:如何让优酷、土豆、56、mofile视频自动播放
详解:如何让优酷.土豆.56.mofile视频自动播放一.优酷视频自动播放的方法 (引用优酷播放器做背景音乐时,可将高宽设置为较小值以达到隐藏效果,当然必须设置为自动播放) 如: <embed ...
iOS 微信音视频自动播放原生接口WeixinJSBridge API(一些整理小技巧)
原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整 ...
微信H5同层播放器以及视频自动播放
iOS之前已经解决了视频播放默认全屏,且浮在页面最顶端的问题 playsinline webkit-playsinline 这样就可以在视频之上进行一些操作,实现诸如弹幕.自定义播放控件等的效果. 但 ...
html插入视频时不自动播放,html5中嵌入视频自动播放的问题解决
在h5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
twitter全自动发推_如何阻止Twitter视频自动播放
twitter全自动发推 As you scroll through your Twitter Timeline, by default, videos will start autoplaying. ...
视频自动播放代码（优酷、搜狐、酷6、土豆等）
一.优酷.搜狐视频自动播放代码(更换地址即可) 如下: width=700 height=550 type=application/x-shockwave-flash wmode="opaq ...
html设置视频一直播放,设置video js多视频连续播放
设置video js多视频连续播放代码如下: var vList = ['http://vjs.zencdn.net/v/oceans.mp4', 'http://clips.vorwaerts-g ...

基于flv.js的视频自动播放

1: html

4:由于累积延过大时,跳帧播放问题

基于flv.js的视频自动播放相关推荐

最新文章

热门文章