javascript - HTML5 在图像或视频点击上播放暂停视频

Question

我的页面上有一个没有控件的 HTML5 视频。我在视频上使用图像(播放图标)。我希望视频可以在点击视频或图标图像时播放/暂停。

这是我尝试使用但不起作用的脚本:

如果我点击视频，它工作正常，同时如果我点击图标图像，什么也不会发生。

$(document).on('click', 'video', '#btnplay', function (e) {
        var video = $(this).get(0);
        if (video.paused === false) {
            video.pause();
            } else {
            video.play();
        }
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="video-container">
  <video autoplay="autoplay" loop="loop" width="100%" height="auto" class="videohome"> Your browser does not support the video tag. <source src="images/video/video.mp4" type="video/mp4" /></video>
  <img id="btnplay" class="playbtn" src="images/play.png" alt="Play">
</div>

有什么建议吗？提前致谢。

Answer 1

$(document).on('click', 'video, #btnplay', function (e) {
        var video = $('video').get(0);  // This line has been updated.
        if (video.paused === false) {
            video.pause();
            } else {
            video.play();
        }
        return false;
    });

说明:需要进行两项更改，两个选择器位于一个引号中，尽管我们单击其中任何一个，但都会获取“video”元素作为引用，因此不要使用 $(this ).get(0) 我将其更改为 $('video').get(0) 因此，无论我们单击图标还是单击视频标签本身，它始终仅引用视频标签。