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

您可以收听播放事件：

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

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

希望你能从这里接受它：）

您可以在此处查看您可以在视频元素上收听的所有evets（只需点击播放/暂停并查看表格更新）： https://www.w3.org/2010/05/video/mediaevents.html

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

4 个答案: