android

移動端關於影片跳轉的currentTime相容問題

影片互動類的專案難免會遇到影片跳轉位置的問題,我這大致分為兩類:

一、手動跳轉:就是說在使用者主動做了某一操作後影片跳轉到某一個時間點。

二、自動跳轉:當影片到達某一時間節點自動跳轉到另一時間節點。

第一類其實只要控制時間節點能對上就基本沒問題,也就是

video.currentTime = 1 //單位:秒

但實際上,android卻表現怪異,影片總是會跳到你想要的影片時間點的附近1-2s左右;

解決方案為,跳轉影片的關鍵幀間隔,簡單解釋為,當影片的fps=24,關鍵幀間隔為72(預設)時,影片會在每 72/24=3s 設定一個關鍵幀,當你設定video.currentTime=2.5時,android會自動跳到最近的關鍵幀,也就離2.5s最近的3s處,也就會導致時間點會偏差1-2s。匯出影片時可以設定你想要的幀間隔,但同時幀間隔越小則影片體積會越大,合理設定幀間隔或者插入相同幀來延長時間點,使得時間點包含關鍵幀是比較好的方案,比如說fps=24,想要跳到1秒20幀,那就關鍵幀間隔設定為48,然後1秒21、22、23、24幀跟20幀一樣,影片會跳轉到關鍵幀1秒24,如此畫面就會是你想要的。

第二類問題就除了要解決第一個影片時間點問題外,還要監測影片當前的進度,video標籤有一個自帶的方法timeupdate,但有一個問題,就是這個事件是大概250ms執行一次,但如果fps=24,幀間隔大概1000/24=42ms;你拿到時間點會有幾幀的偏差。可以使用定時器來拿到當前時間點

  1. setInterval(() => {
  2. let cur = video.currentTime
  3. }, 40);

然後再在每個時間點的後面插入3-4幀相同幀,確保不會跳幀,以上,基本可以確保影片位置正確的跳轉。

本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀

版權宣告:此處為CSDN博主「linxner」的原創文章,依據CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。

原文連結:https://blog.csdn.net/linxner/article/details/101296585