android上視頻播放存在的問題

在PC上播放html5視頻，設(shè)置video.currentTime=5,視頻將跳到5s的位置，并且顯示出第5s的畫面。在安卓下，卻存在下面兩個(gè)問題：

• 在安卓上，為了省電，在暫停的時(shí)候，改變視頻屬性不會(huì)刷新畫面，直到你再次播放的時(shí)候，這些改變才會(huì)表現(xiàn)出來(lái)。所以暫停的時(shí)候改變currentTime不會(huì)更新畫面，手動(dòng)改變進(jìn)度條也不行。
• 在安卓上，視頻并不是準(zhǔn)確的按currentTime播放，可能你設(shè)置 currentTime = 5，但是播放出來(lái)的內(nèi)容卻是第8s的。這個(gè)問題，用手改變進(jìn)度條也會(huì)出現(xiàn)，可以將視頻拖到60s，在拖回10s，看看播放的內(nèi)容是否是第10s的。

所以，對(duì)于一些需要精確控制視頻進(jìn)度的情景，比如視頻演示，這兩個(gè)問題會(huì)造成很大的困擾，因?yàn)閍ndroid下，沒有辦法很精確的控制視頻進(jìn)度。

可能并不是所有移動(dòng)端都存在這兩個(gè)問題，沒驗(yàn)證哪些存在

解決辦法

對(duì)于第二個(gè)問題，是沒有辦法改變的，這是html5 video的實(shí)現(xiàn)問題。但是第一個(gè)問題，卻可以通過模擬“暫停下設(shè)置視頻進(jìn)度”解決。

模擬的方式是，先播放視頻，然后將視頻設(shè)置到目標(biāo)時(shí)間，當(dāng)視頻加載出第一幀的時(shí)候，暫停視頻，如下：

播放視頻，監(jiān)聽playing事件

觸發(fā)playing事件,說(shuō)明視頻已經(jīng)開始播放，此時(shí)設(shè)置currentTime等于目標(biāo)時(shí)間，監(jiān)聽seeked事件

觸發(fā)seeked事件，在移動(dòng)端下，seeked事件觸發(fā)后，表示已經(jīng)尋址到了指定時(shí)間，但是畫面還沒更新，監(jiān)聽timeupdate事件

觸發(fā)timeupdate事件，在移動(dòng)端下，第一次觸發(fā)這個(gè)事件表示即將更新畫面，此時(shí)設(shè)置50ms的延遲，因?yàn)橐话阋曨l為24fps，也就是40ms刷新一幀，50ms的延遲為了確保第一幀加載出來(lái)

延遲結(jié)束，暫停視頻。此時(shí)視頻暫停再目標(biāo)時(shí)間，畫面也已經(jīng)加載出來(lái)。

之所以要搞得這么復(fù)雜，是因?yàn)樵赼ndroid下，事件觸發(fā)并不是很準(zhǔn)確，經(jīng)觸發(fā)了playing和timeupdate事件，但視頻可能都還沒開始播放，但是有這么幾個(gè)規(guī)律:

• 第一，觸發(fā)seeked之后的timeupdate的時(shí)候，視頻已經(jīng)很接近播放了
• 第二，觸發(fā)playing后，第2次觸發(fā)timeupdate的時(shí)候一定已經(jīng)播放著了，但是觸發(fā)兩次timeupdate的間隔比較大，往往視頻已經(jīng)很明顯的播放一小段。

并非放之四海皆準(zhǔn)的規(guī)律

下面的代碼就是用這種方式實(shí)現(xiàn)的，能夠在android上暫停時(shí)設(shè)置currentTime，主要看setTime方法：

/*** Created by Administrator on 2017/1/9.*/ export default class Video{constructor(src){let uid = new Date().getTime();this.id = 'video'+uid;this.video = $(`<video id="${this.id}"></video>`).get(0);this.status = null; //播放狀態(tài)}play(){this.status = "playing";this.video.play();return this;}pause(){this.status = "paused";this.video.pause();return this;}/*** 設(shè)置視頻當(dāng)前的事件* @param time 時(shí)間* @returns {Number}*/setTime(time){if(this.status == "playing"){this.video.currentTime = time;console.log("當(dāng)前視頻時(shí)間："+this.video.currentTime);return time;}/*目的：在移動(dòng)端下加載指定時(shí)長(zhǎng)的視頻畫面移動(dòng)端下存在的問題：在移動(dòng)端下，如果不播放視頻，則視頻控件顯示黑屏，此時(shí)不可指定視頻當(dāng)前時(shí)間解決辦法：在移動(dòng)端下，設(shè)置到指定時(shí)長(zhǎng)后，播放極小的一段時(shí)間，讓視頻控件顯示出當(dāng)前的畫面，然后暫停，看起來(lái)就像直接指定時(shí)間一樣實(shí)現(xiàn)說(shuō)明：1、監(jiān)聽playing事件，并在其中監(jiān)聽seeked和timeupdate事件，兩個(gè)事件都觸發(fā)后，視頻一般接近或已經(jīng)開始播放了，然后再設(shè)置50ms的延遲，一般可保證視頻播放2、在setTime執(zhí)行的過程中，有可能外部已經(jīng)更改了視頻播放的狀態(tài)（通過調(diào)用this.play()或this.pause()），因此設(shè)置一個(gè)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("當(dāng)前視頻時(shí)間："+that.video.currentTime);if(that.status == "playing"){that.video.play();}else{that.video.pause();}},that.delay);});})})return time;}}

一些鏈接

video標(biāo)簽在不同平臺(tái)上的事件表現(xiàn)差異分析

Jumping to time offsets in HTML5 video

移動(dòng)端HTML5視頻播放優(yōu)化實(shí)踐

html5 video seekable屬性

【W(wǎng)3C】 HTML DOM Video 對(duì)象

【MDN】video標(biāo)簽

視頻播放的那些事

html5–移動(dòng)端視頻video的android兼容，去除播放控件、全屏等

總結(jié)

以上是生活随笔為你收集整理的【移动端html5】 android video播放进度精确控制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。