单击 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>

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

原文由 user2698522 发布，翻译遵循 CC BY-SA 4.0 许可协议

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()" 的默认行为是：初始身体点击在身体上播放不起作用，但在初始播放点击身体后切换播放/暂停
• onclick="this.paused ? this.play() : this.pause();" 在初始播放后身体点击不起作用，既不能播放也不能暂停，大概是为了类似于 onclick="this.play()" 发生的事情

原文由 oabarca 发布，翻译遵循 CC BY-SA 4.0 许可协议