如何在单击其他视频的播放按钮时暂停视频

Question

我认为设置点击事件很简单，但是它没有将html5视频的控件识别为视频的一部分。

页面上还有另一个视频，其ID为video1，设置为自动播放。 ID为video2的第二个视频没有重叠，但有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();
});

请注意，如果我点击它可以运行的视频，但是没有点击控件。

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

});

Answer 2

为视频和声音工作

HTML >>

<audio class="player"  controls>
       <source src="{{$sound->path}}" type="audio/ogg">
       <source src="{{$sound->path}}" type="audio/mpeg">                                
</audio>
<video class="player" style="max-width: 100%" controls>
       <source src="{{$video->path}}" type="video/mp4">
       <source src="{{$video->path}}" type="video/ogg">
</video>

脚本>>

<script>
    $(document).ready(function () {
        function playFile() {
            $(".player").not(this).each(function () {
                $(this).get(0).pause();
            });
            this[this.get(0).paused ? "play" : "pause"]();
        }

        $('.player').on("click play", function() {
            playFile.call(this);
        });
    })
</script>

Answer 3

视频元素支持它自己的事件。 playing就是其中之一，当视频开始播放时会提醒您，无论是自动播放还是暂停后按下播放按钮。你应该能够听取它而不是点击事件。

Answer 4

你可以听一下onplay活动：

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

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

希望你能从这里拿走:)

你可以在这里查看你可以在视频元素上收听的所有事件（只需点击播放/暂停并查看表格更新）：qazxsw poi