android上視頻播放存在的問題

在PC上播放html5視頻，設置video.currentTime=5,視頻將跳到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 = 'video'+uid;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兼容，去除播放控件、全屏等

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。