如何在單擊另一個視頻的播放按鈕時暫停視頻

我認爲使用點擊事件設置起來很簡單，但它不會將視頻的控件識別爲視頻的一部分。如何在單擊另一個視頻的播放按鈕時暫停視頻

頁面上還有另一個視頻，其視頻ID設置爲自動播放。視頻2的ID不會過度播放，但具有html5控件，因此觀衆可以啓動它。我希望設置它，以便在選擇video2中的播放按鈕後，視頻1停止播放。

這是我已經試過：

HTML

<video id="video2" controls> 
    <source src="assets/explainer.mp4" type="video/mp4"> 
    This browser does not support HTML5 video 
</video>

$('#video2').click(function(){ 
    $('#video1').get(0).pause(); 
});

需要注意的是，如果我點擊它的工作原理的視頻，但點擊控件沒有。

來源

2016-10-04 jhawes

您可能需要實現自己的自定義視頻控件或使用類似http://videojs.com的庫 –

通過控件，我認爲您是正確的。儘管如此，我確實找到了一種解決方法，但仍能完成工作。 – jhawes

視頻元素支持它自己的事件。 playing就是其中之一，並在視頻開始播放時提醒您，自動播放或在暫停後按下播放按鈕。你應該能夠聽取它而不是點擊事件。

來源

2016-10-04 21:19:09

// You heard about classes 

$(".allMyVideos").on("click", function() { 

    // All but not this one - pause 
    $(".allMyVideos").not(this).each(function() { 
     this.pause(); 
    }); 

    // Play this one 
    // this.play(); 

    // Or rather toggle play/pause 
    this[this.paused ? "play" : "pause"](); 

});

或者，如果你有兩個ID視頻：

var $v1$v2 = $("#video1, #video2"); 

$v1$v2.on("click", function() { 

    // ...not this one - pause 
    $v1$v2.not(this).each(function() { 
     this.pause(); 
    }); 

    // Play this one 
    // this.play(); 

    // Or rather toggle play/pause 
    this[this.paused ? "play" : "pause"](); 

});

來源

2016-10-04 21:19:13

試過這兩個，並沒有任何運氣。我可以開始在jsFiddle中構建一些東西 - 也許這會有所幫助。 – jhawes

對於你的_classes_答案，不一定需要使用類。 '$（「video」）'將會完成這項工作。 – Robiseb

@jhawes在他的問題中提到，點擊事件在考慮視頻導航按鈕時沒有幫助。你的代碼可以工作，如果你更新事件來「玩」 –

你可以聽onplay事件：

var vid1 = document.getElementById("video-1");  
var vid2 = document.getElementById("video-2"); 

vid1.onplay = function() { 
    vid2.pause(); 
};

希望你可以把它從這裏:)

你可以在這裏檢查所有可以在視頻元素上聆聽的平鋪（只需點擊播放/暫停並查看錶格更新）： https://www.w3.org/2010/05/video/mediaevents.html

來源

2016-10-04 21:20:10

如何在單擊另一個視頻的播放按鈕時暫停視頻

回答

相關問題