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

Question

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

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

Answer 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>