早在flash時代 我們控制視頻播放指定時間位置的畫面也會有不准確的情況,
具體情況表現為:video.seek(time) 而實際畫面會跳到此時間附近(1-2秒)的畫面
而HTML5 我們通過
var vd=document.getElementById("DOM ID名");
vd.currentTime=10 ;
可以指定視頻立即播放對應時間位置的畫面 (電腦,IOS端均可)
但是andorid端真機上卻發現幾個問題
Q:設置 vd.currentTime=時間,但是卻沒有效果;
A:android端設置時間后,一定要video.play(); 才會刷新畫面。
Q:vd.currentTime=時間;並video.play(); 但是視頻居然不是從我配置的時間位置開始播放的,(具體表現為,畫面會跳到此時間附近(1-2秒、甚至更多)的畫面)
A:這里要引入一個詞語叫【視頻關鍵幀距離】android端會跳轉到離你設置currentTime 最近的一個關鍵幀位置播放。
注意:這個【關鍵幀距離】中的關鍵幀並不是我們常說的AE等軟件里插入的關鍵幀;
你還可以訪問這里查看更多關於視頻中的名詞解釋:
https://helpx.adobe.com/cn/media-encoder/using/video-audio-encoding-compression.html
那么,隨之而來的解決思路就是改變視頻的關鍵幀距離。例如:當前視頻 fps=25, 關鍵幀距離是75幀(簡單計算就是3秒一個關鍵幀), 那么我設置 vd.currentTime=7, 7*25 =175 視頻將會從 最近的一個關鍵幀(150幀)播放。 也就會出現我們控制播放時間不准確的現象。當我們改變關鍵幀距離為25幀 ,那么就可以准確的控制 vd.currentTime=7 的跳轉播放畫面了。如果你還有更高的精度要求,你可以繼續縮小關鍵幀距離。但是請注意:在其他參數相同的情況下這會增大視頻的體積。
最后,怎么來設置視頻的關鍵幀距離呢?恩,你猜到了,這家公司又出鏡了:Adobe Media Encoder 與 After Effects 和 Premiere Pro 這3款軟件都可以設置,我這里使用了Media Encoder。 下面為截圖
導入視頻,點擊紅框打開配置
設置界面。有心情的可以慢慢研究他的功能
右側找到對應的配置,設置好 輸出即可
到此,android html5 video 設置currentTime 不准確的問題得到解決。
如果此文對你有幫助,有力的推薦一下,有財的右側掃描QR碼 支持! :)) 雙下巴微笑