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) 所以我们要么点击图标，要么点击视频标签本身，它总是只指视频标签。