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

问题描述

我试图让视频能够像YouTube一样播放和暂停（使用播放和暂停按钮，然后点击视频本身。）

I'm trying to get the video to be able to play and pause like it does YouTube (Using both the play and pause button, and clicking the video itself.)

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

你有什么想法，为什么这会打破播放和暂停控制按钮？

Do you have any ideas why this would break the play and pause control button?

推荐答案

最简单的形式是使用 onclick 侦听器：

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

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

No jQuery or complicated Javascript code needed.

播放/暂停可以使用 onclick =this.paused？this.play（）：this.pause（）;。

这篇关于单击HTML 5视频元素播放，暂停视频，中断播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！