JavaScript函數邏輯播放/暫停HTML5視頻

我有一個基於窗口大小播放/暫停HTML5視頻的腳本。當用戶進入全屏時，視頻播放。當用戶退出全屏時，視頻會按預期暫停。如果您在暫停的視頻上再次輸入全屏，則會調用播放，然後立即暫停。JavaScript函數邏輯播放/暫停HTML5視頻

這裏的播放/暫停腳本和控制檯日誌：

// Listen for exiting fullscreen, hide video element. 
    $("#" + m).on("webkitfullscreenchange", function(e) { 
     this.className = "hide"; 
     if($("#" + m).get(0).paused) { 
     v.play(); 
     console.log('playing...') 
     } else { 
     v.pause(); 
     console.log('pausing...') 
     }

這裏有一個CodePen demo具有代表性的HTML和完整的腳本。

我可以在邏輯中做些什麼來防止第二次暫停呼叫？

來源

2016-02-13 Brian

我無法重現您的問題，我可能會錯過一些上下文。你能告訴我們更多的代碼嗎，特別是如何定義'm'和'v'，在哪裏設置請求全屏的處理程序以及HTML的相關位？ – Arthur

@Arthur剛剛添加了一個代碼塊和完整腳本的CodePen鏈接。 – Brian

您只對全屏狀態下的_change_做出反應，但實際上並未檢查事件是通過全屏幕的_in_還是_out_觸發的。 http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events有一個簡單的例子，如何確定。 – CBroe

我找到了問題的根源。

這裏是你的代碼的一般結構：

$(document).ready(function() { 

    $('.cell').on('click', function() { 

    // some more code ... 

    $("#" + m).on("webkitfullscreenchange", function(e) { 
     // here the code for the event handler that pauses and plays the video 
    }); 
)}; 
)};

你可以看到，增加了對「webkitfullscreenchange」事件......處理程序的代碼是處理器內部的。細胞點擊活動！

這裏發生了什麼：每次點擊單元格時間，您請求的全屏，並你對「webkitfullscreenchange」事件添加一個新的事件處理程序（jQuery中，on註冊一個新的事件處理程序，它如果有的話不會取代之前的）。

第一次單擊時，添加處理程序並請求全屏模式：它發出事件，單個處理程序獲取並播放視頻。

但第二次單擊時，您請求全屏模式並添加第二個處理程序。當事件發出時，這兩個處理程序都會反應：第一個播放視頻，第二個播放器立即暫停播放。

因此，這裏是解決方案的一部分：只需刪除從Click事件處理程序中註冊更多事件處理程序的部分（根據經驗，必須在其他處理程序內部設置處理程序的情況非常具體，所以如果您沒有任何特定的原因，請不要這樣做）。

爲什麼一部分？因爲即使它解決了您的第一個問題，它也會留下另一個問題：如果您單擊，讓視頻結束，然後退出全屏模式會發生什麼？處理程序將會被調用，驗證視頻是否正在播放，注意它不是，並開始播放它，即使您剛剛離開全屏。

因此，這是最終解決方案：設置您的處理程序，以便根據評論中的@CBroe建議，檢查您是否進入或退出全屏模式（使用document.webkitIsFullScreen），並相應播放或暫停。

$('video').on('webkitfullscreenchange', function(e) { 
    if(document.webkitIsFullScreen) { 
    this.play(); 
    } else { 
    this.className = "hide"; 
    this.pause(); 
    } 
});

我forked your CodePen and set up the full solution如果你想看看。

來源

2016-02-14 11:18:40 Arthur

JavaScript函數邏輯播放/暫停HTML5視頻

回答

相關問題