如何在单击另一个视频的播放按钮时暂停视频

我认为使用点击事件设置起来很简单，但它不会将视频的控件识别为视频的一部分。如何在单击另一个视频的播放按钮时暂停视频

页面上还有另一个视频，其视频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

如何在单击另一个视频的播放按钮时暂停视频

回答

相关问题