如何在单击另一个视频的播放按钮时暂停视频
问题描述:
我认为使用点击事件设置起来很简单,但它不会将视频的控件识别为视频的一部分。如何在单击另一个视频的播放按钮时暂停视频
页面上还有另一个视频,其视频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();
});
需要注意的是,如果我点击它的工作原理的视频,但点击控件没有。
答
// 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"]();
});
答
你可以听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
您可能需要实现自己的自定义视频控件或使用类似http://videojs.com的库 –
通过控件,我认为您是正确的。尽管如此,我确实找到了一种解决方法,但仍能完成工作。 – jhawes