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

【问题标题】：How to pause a video when another video's play button is clicked单击另一个视频的播放按钮时如何暂停视频
【发布时间】：2016-10-04 21:14:25
【问题描述】：

我认为通过点击事件设置它会很简单，但它无法将 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>

js

$('#video2').click(function(){
  $('#video1').get(0).pause();
});

请注意，如果我点击视频，它可以工作，但点击控件不起作用。

【问题讨论】：

您可能需要实现自己的自定义视频控件或使用像videojs.com这样的库
使用控件我认为您是正确的。虽然，我确实找到了一种解决方法，但仍然可以完成工作。

标签： javascript jquery html video

【解决方案1】：

适用于视频和声音

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>

【讨论】：

【解决方案2】：

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

});

【讨论】：

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

【解决方案3】：

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

【讨论】：

.onplay 帮助了我，因为我最初在 video 标签 onclick 事件中放弃了我的函数调用，而不是 onplay。

【解决方案4】：

你可以收听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

【讨论】：

【解决方案5】：

我遇到了同样的问题，并用下面的代码 sn-p 解决了这个问题，我写了 where (.video) 代表你的视频的类名。

<script>
    $("video").on("play", function (e) {
        $('.video').not(this).each(function(){
            var $playpause = $(this);
            video = $playpause[0];
            video.pause();
        });
    });
</script>

【讨论】：