html - 单击 HTML 5 视频元素播放、暂停视频、中断播放按钮

Question

我正在尝试让视频能够像 YouTube 一样播放和暂停(同时使用播放和暂停按钮，并单击视频本身。)

<video width="600" height="409" id="videoPlayer" controls="controls">
 <!-- MP4 Video -->
 <source src="video.mp4" type="video/mp4">
</video>


<script>
    var videoPlayer = document.getElementById('videoPlayer');

    // Auto play, half volume.
    videoPlayer.play()
    videoPlayer.volume = 0.5;

    // Play / pause.
    videoPlayer.addEventListener('click', function () {
        if (videoPlayer.paused == false) {
            videoPlayer.pause();
            videoPlayer.firstChild.nodeValue = 'Play';
        } else {
            videoPlayer.play();
            videoPlayer.firstChild.nodeValue = 'Pause';
        }
    });
</script>

你知道为什么这会破坏播放和暂停控制按钮吗？

Answer 1

最简单的形式是使用onclick 监听器:

<video height="auto" controls="controls" preload="none" onclick="this.play()">
 <source type="video/mp4" src="vid.mp4">
</video>

不需要 jQuery 或复杂的 Javascript 代码。

播放/暂停可以通过 onclick="this.paused ? this.play() : this.pause();" 来完成。

演示:

<video height="200" controls="controls" preload="none" onclick="this.play()">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>

在 Chromium 89 上:

• onclick="this.play()" 在初始播放+暂停(点击控件仍然有效)后通过点击正文(而不是控件)来防止视频再次播放，这通常是不受欢迎的。这大概是因为回调使其播放，然后事件传播并且浏览器立即重新暂停它。
• 没有 onclick="this.play()" 的默认行为是:初始 body 单击以在 body 上播放不起作用，但在初始播放点击 body 后切换播放/暂停
• onclick="this.paused ? this.play() : this.pause();" 在初始播放后使 body 点击既不能播放也不能暂停，大概是为了类似于onclick="this.play()"
会发生什么