Javascript 当另一个视频'；单击“播放”按钮

我认为这将是一个简单的设置与点击事件，但它不承认html5视频的控制作为视频的一部分

页面上另一个ID为video1的视频设置为自动播放。第二个ID为video2的视频不会过度播放，但具有html5控件，因此观看者可以启动它。我想将其设置为，一旦选择了video2中的播放按钮，video1将停止播放

以下是我尝试过的：

html

<video id="video2" controls>
  <source src="assets/explainer.mp4" type="video/mp4">
  This browser does not support HTML5 video
</video>

---

请注意，如果我单击视频，它会工作，但单击控件则不会工作。

视频元素支持它自己的事件。是其中之一，并在视频开始播放时（自动播放或暂停后按下播放按钮）向您发出警报。您应该能够监听它，而不是单击事件。

视频元素支持它自己的事件。是其中之一，并在视频开始播放时（自动播放或暂停后按下播放按钮）向您发出警报。您应该能够侦听它，而不是单击事件

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

});

或者，如果您有两个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();
};

希望你能从这里开始：）

您可以在此处检查视频元素上可以收听的所有事件（只需点击播放/暂停，即可查看表格更新）：

---

您可以收听onplay事件：

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

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

希望你能从这里开始：）

您可以在此处检查视频元素上可以收听的所有事件（只需点击播放/暂停，即可查看表格更新）：

---

为视频和声音工作

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>

$（文档）.ready（函数（）{
函数playFile（）{
$（“.player”）。不是（这个）。每个（函数（）{
$（this.get（0.pause（））；
});
此[this.get（0）.暂停？“播放”：“暂停”]（）；
}
$（'.player'）。打开（“单击播放”，函数（）{
调用（this）；
});
})

适用于视频和声音

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>

$（文档）.ready（函数（）{
函数playFile（）{
$（“.player”）。不是（这个）。每个（函数（）{
$（this.get（0.pause（））；
});
此[this.get（0）.暂停？“播放”：“暂停”]（）；
}
$（'.player'）。打开（“单击播放”，函数（）{
调用（this）；
});
})

您可能需要实现自己的自定义视频控件，或者使用类似于控件的库，我认为您是正确的。虽然，我确实找到了一种解决方法，但仍然完成了工作。您可能需要实现自己的自定义视频控件，或者使用类似于我认为正确的控件的库。虽然，我确实找到了一种解决办法，但还是完成了任务。我尝试了这两种方法，但都没有成功。我可以开始在JSFIDLE中构建一些东西——也许这会有所帮助。对于您的类，不一定需要使用类<代码>$（“视频”）将完成这项工作。@j他在问题中提到，在考虑视频导航按钮时，单击事件没有帮助。如果您将事件更新为“play”@BartekMaki-humm是的，我错过了OP的问题中的

控件

属性确定我找到了一种方法，但这是一种解决方法。我在父元素中放置了一个绝对位置div，它位于播放按钮上方。当它被点击时，它停止video1，播放video2，然后我将其删除，因为我只需要事件发生一次。想法？尝试了这两种方法，但没有任何运气。我可以开始在JSFIDLE中构建一些东西——也许这会有所帮助。对于您的类，不一定需要使用类<代码>$（“视频”）将完成这项工作。@j他在问题中提到，在考虑视频导航按钮时，单击事件没有帮助。如果您将事件更新为“play”@BartekMaki-humm是的，我错过了OP的问题中的

控件

属性确定我找到了一种方法，但这是一种解决方法。我在父元素中放置了一个绝对位置div，它位于播放按钮上方。当它被点击时，它停止video1，播放video2，然后我将其删除，因为我只需要事件发生一次。想法？

.onplay

帮助了我，就像我最初在

视频
标记
onclick
事件中放弃函数调用而不是
onplay
一样。onplay
帮助了我，就像我最初在
视频
标记
onclick
事件中放弃函数调用而不是
onplay
一样。