护肤品网站建设策划书,英语网站新增两个栏目,沈阳网络公司官网,建筑工程完工证明范本android上视频播放存在的问题
在PC上播放html5视频#xff0c;设置video.currentTime5,视频将跳到5s的位置#xff0c;并且显示出第5s的画面。在安卓下#xff0c;却存在下面两个问题#xff1a;
在安卓上#xff0c;为了省电#xff0c;在暂停的时候#xff0c;改变视…android上视频播放存在的问题
在PC上播放html5视频设置video.currentTime5,视频将跳到5s的位置并且显示出第5s的画面。在安卓下却存在下面两个问题
在安卓上为了省电在暂停的时候改变视频属性不会刷新画面直到你再次播放的时候这些改变才会表现出来。所以暂停的时候改变currentTime不会更新画面手动改变进度条也不行。在安卓上视频并不是准确的按currentTime播放可能你设置 currentTime 5但是播放出来的内容却是第8s的。这个问题用手改变进度条也会出现可以将视频拖到60s在拖回10s看看播放的内容是否是第10s的。
所以对于一些需要精确控制视频进度的情景比如视频演示这两个问题会造成很大的困扰因为android下没有办法很精确的控制视频进度。 可能并不是所有移动端都存在这两个问题没验证哪些存在 解决办法
对于第二个问题是没有办法改变的这是html5 video的实现问题。但是第一个问题却可以通过模拟“暂停下设置视频进度”解决。
模拟的方式是先播放视频然后将视频设置到目标时间当视频加载出第一帧的时候暂停视频如下
播放视频监听playing事件触发playing事件,说明视频已经开始播放此时设置currentTime等于目标时间监听seeked事件触发seeked事件在移动端下seeked事件触发后表示已经寻址到了指定时间但是画面还没更新监听timeupdate事件触发timeupdate事件在移动端下第一次触发这个事件表示即将更新画面此时设置50ms的延迟因为一般视频为24fps也就是40ms刷新一帧50ms的延迟为了确保第一帧加载出来延迟结束暂停视频。此时视频暂停再目标时间画面也已经加载出来。
之所以要搞得这么复杂是因为在android下事件触发并不是很准确经触发了playing和timeupdate事件但视频可能都还没开始播放但是有这么几个规律:
第一触发seeked之后的timeupdate的时候视频已经很接近播放了第二触发playing后第2次触发timeupdate的时候一定已经播放着了但是触发两次timeupdate的间隔比较大往往视频已经很明显的播放一小段。 并非放之四海皆准的规律 下面的代码就是用这种方式实现的能够在android上暂停时设置currentTime主要看setTime方法 /*** Created by Administrator on 2017/1/9.*/
export default class Video{constructor(src){let uid new Date().getTime();this.id videouid;this.video $(video id${this.id}/video).get(0);this.status null; //播放状态}play(){this.status playing;this.video.play();return this;}pause(){this.status paused;this.video.pause();return this;}/*** 设置视频当前的事件* param time 时间* returns {Number}*/setTime(time){if(this.status playing){this.video.currentTime time;console.log(当前视频时间this.video.currentTime);return time;}/*目的在移动端下加载指定时长的视频画面移动端下存在的问题在移动端下如果不播放视频则视频控件显示黑屏此时不可指定视频当前时间解决办法在移动端下设置到指定时长后播放极小的一段时间让视频控件显示出当前的画面然后暂停看起来就像直接指定时间一样实现说明1、监听playing事件并在其中监听seeked和timeupdate事件两个事件都触发后视频一般接近或已经开始播放了然后再设置50ms的延迟一般可保证视频播放2、在setTime执行的过程中有可能外部已经更改了视频播放的状态通过调用this.play()或this.pause()因此设置一个status字段保存外部的操作*/let that this;that.video.play();$(that.video).one(playing,function(){that.video.currentTime time;$(that.video).one(seeked,function(){$(that.video).one(timeupdate,function(){clearTimeout(that.timeout);that.timeout setTimeout((){console.log(当前视频时间that.video.currentTime);if(that.status playing){that.video.play();}else{that.video.pause();}},that.delay);});})})return time;}}
一些链接
video标签在不同平台上的事件表现差异分析
Jumping to time offsets in HTML5 video
移动端HTML5视频播放优化实践
html5 video seekable属性
【W3C】 HTML DOM Video 对象
【MDN】video标签
视频播放的那些事
html5–移动端视频video的android兼容去除播放控件、全屏等
