html5 – 点击HTML 5视频元素播放,暂停视频,中断播放按钮

我想让视频能够像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>

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

解决方法

不要提起一个旧帖子，但是我在寻找同样的解决方案的时候降落在这个问题上。我最终想出了我自己的东西。想我会贡献

HTML：

<video class="video"><source src=""></video>

JAVASCRIPT：“JQUERY”

$('.video').click(function(){this.paused?this.play():this.pause();});