改變HTML5視頻元素源后不久尋求的問題

Question

我正在嘗試使用HTML5來模擬更強大的多媒體播放器，該播放器在后台加載廣告並根據需要在視頻和廣告之間進行切換。

我遇到的第一個挑戰是大多數移動設備不允許您預加載視頻，這意味着無法在后台加載廣告的概念。 相反，我采用了一種不那么優雅的方法：擁有一個<video>標簽，並在投放廣告時更改其src屬性。 這樣做的好處是你可以使用現有的預加載和自動播放權限，但缺點是每次視頻元素改變都會產生令人討厭的緩沖。 但是，我們的客戶可以接受這一點。

所以理想的行為是：

1. 內容播放1分鍾
2. 廣告播放1分鍾
3. 內容從2分鍾開始恢復

我遇到的第二個挑戰是讓內容在正確的位置恢復。 當您更改src屬性時，視頻將從時間0開始播放。因此，我不得不使用另一個丑陋的解決方案：等待視頻加載（ canPlayThrough事件）然后執行搜索到所需的時間。 這實際上導致它在從廣告切換回內容時緩沖兩次 - 但是不使用本機應用程序是可接受的成本。

為了弄清楚我們應該尋找的確切位置，我在后台運行了一個“虛擬內容播放器”。 基本上是一個變量，用於存儲當前時間並在<video>元素拋出updateTime事件時進行更新。 隨着廣告的進展，虛擬內容以完全相同的速率前進。 當需要切換回來時，我們已經跳過了一分鍾的內容。

我遇到的挑戰是， 有時它會尋找一個隨機的位置。 我完全不知道為什么。 例如，這是我在7:39（459秒）播放廣告的不同搜索事件的控制台日志，該廣告應該在8:09（489秒）結束：

@@ seeking from: 30.06833267211914, to: 0
@@ seeked to: 0
Content currentTime: 0
Content currentTime: 489.0016784667969
@@ seeking from: 489.0016784667969, to: 489.0016784667969
Content currentTime: 489.0016784667969
@@ seeking from: 489.0016784667969, to: 489.0016784667969
Content currentTime: 489.0016784667969
@@ seeked to: 489.0016784667969
Content currentTime: 489.0016784667969
Content currentTime: 441.502197265625
Content currentTime: 441.3605346679683
Content currentTime: 441.6107177734375

解釋你在看什么：

我有一個在updateTime事件觸發時更新的seekFrom變量。 這用於在seeking事件期間獲取“from”值。 to值等於video.currentTime 。 在seeked事件中，我只是顯示video.currentTime 。

所以最初有一個從30到0的搜索（這是在更改源時執行的“尋找0”）。 不久之后，當前時間在搜索事件被觸發之前變為489。 然后有兩個尋找事件 - 一個表示從0變為489（自當前時間更新以來被誤解為489到489），另一個表示從489到441的未經請求的變化（也被誤解為489到489）當前時間更新晚了 ）。 在此之后，當前時間變為441。

所有這些都是由以下兩行代碼創建的：

video.src = content.source;
video.currentTime = content.currentTime;

在運行video.currentTime ， content.currentTime等於489.我沒有手動設置video.currentTime ，也沒有在搜索欄上執行搜索。 數字441似乎是憑空出現的，但如果我一遍又一遍地重播視頻，它總是尋求這個完全相同的位置 - 所以必須有一些意義。

所以問題是：

為什么在地球上它尋求兩次，我該如何阻止它？

注意：在Macbook Pro上使用QuickTime都會遇到這種情況。 我還沒有在iOS上進行測試（因為它不能正常工作），當我到達那里時，Android將是一個完全不同的問題。

另外，請注意：我在第二次搜索之前收到了一個seeking事件 - 所以如果HTML5中有任何方法可以“取消”搜索，那么這可能是一個可接受的解決方案。

Answer 1

不知道為什么有人投了一票...我不明白我的問題是不合法的。 經過實驗，研究和嘗試每一個隨機的建議，我可以在晦澀的博客文章中找到我找到的東西：

iOS無法尋找小數位 。 尋求491.337將失敗，但尋求491將成功。

我剛剛添加了以下內容：

video.currentTime = content.currentTime | 0; // Shortcut for truncating positive integers