2016-10-04 266 views
0

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

頁面上還有另一個視頻,其視頻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> 

JS

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

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

+0

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

+0

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

回答

0

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

1
// 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"](); 

}); 
+0

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

+0

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

+0

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

0

你可以聽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

相關問題