需求说明:
视频正文页在做视频联播时会遇到视频无法播放或者解析异常的情况,希望遇到有问题视频时可以跳过当前视频。
事件说明:
Video对象可以通过
ontimeupdate
事件来报告当前的播放进度,即在播放位置发生改变时触发该事件,我们可以通过监听该事件来判断视频是否正常播放。
实例说明:
视频无法播放
是视频点击播放按钮后停留在0秒,此时已经触发timeupdate
事件。视频解析异常
则是不会触发timeupdate
事件,所以实例中我们通过这两种方式来进行判断。
var videoJudje = false;//用于判断无法解析var currentTime = 0;//用于判断无法播放var videoDom = document.getElementById("video");function getWrongVideo(videoDom){ var videoWrong;//定时器 videoDom.addEventListener("timeupdate",videoShow,"false"); function videoShow(){ videoJudje = true; currentTime = videoDom.currentTime; if(currentTime > 1){ videoDom.removeEventListener("timeupdate",videoShow,"false"); clearTimeout(videoWrong); } }; videoWrong = setTimeout(function(){ if(videoJudje == false||currentTime == 0){ //此处添加发现错误视频之后的处理函数 videoDom.removeEventListener("timeupdate",videoShow,"false"); } },5000); }
缺陷说明:
虽然条件判断为
currentTime>1
时移除timeupdate
监听,但是由于执行时间的问题,通常currentTime
到4、5秒才执行移除。通过定时器延迟5秒来判断视频是否出问题,在网速等相关问题的影响下,会发生误判,及好的可以正常播放的视频也会被判断为有问题的,所以该判断无法达到绝对准确
ps:有错误的地方还请多多指教
作者:进击的程序茗
链接:https://www.jianshu.com/p/64f6d1b66d72
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦