单击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();".

Answer 2

不要提出一个旧帖子,但我在搜索相同的解决方案时登陆了这个问题.我最终拿出了自己的东西.想我会做出贡献.

HTML:

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

JAVASCRIPT:"JQUERY"

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

Answer 3

添加return false;为我工作:

jQuery版本:

$(document).on('click', '#video-id', function (e) {
    var video = $(this).get(0);
    if (video.paused === false) {
        video.pause();
    } else {
        video.play();
    }

    return false;
});

Vanilla JavaScript版本:

var v = document.getElementById('videoid');
v.addEventListener(
    'play', 
    function() { 
        v.play();
    }, 
    false);

v.onclick = function() {
    if (v.paused) {
        v.play();
    } else {
        v.pause();
    }

    return false;
};

Answer 4

我在这样做时遇到了无数问题，但最终想出了一个有效的解决方案。

基本上，下面的代码向视频添加了一个点击处理程序，但忽略了下部的所有点击（0.82 是任意的，但似乎适用于所有尺寸）。

    $("video").click(function(e){

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if(y > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();

    });

Answer 5

问题似乎是<video>元素内部冒泡......所以当您单击“播放”按钮时，代码会触发，然后播放按钮本身也会被触发:(

我找不到一种简单（可靠）的方法来阻止点击冒泡（逻辑告诉我应该有一种方法，但是......它现在逃脱了我）

不管怎样，我找到的解决方案是在视频上放置一个透明的，<div>大小适合控件出现的位置...所以如果你点击 div 那么你的脚本控制播放/暂停，但如果用户点击控件然后该<video>元素会为您处理它。

下面的示例是根据我的视频调整大小的，因此您可能需要调整相关<div>s 的大小，但它应该可以帮助您入门

<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>

<script>
    var v = document.getElementById('videoPlayer');
    var vv = document.getElementById('vOverlay');
    <!-- Auto play, Half volume -->
    v.play()
    v.volume = 0.5;
    v.firstChild.nodeValue = "Play";

    <!-- Play, Pause -->
    vv.addEventListener('click',function(e){
        if (!v.paused) {
            console.log("pause playback");
            v.pause();
            v.firstChild.nodeValue = 'Pause';
        } else {
            console.log("start playback")
            v.play();
            v.firstChild.nodeValue = 'Play';
        }
      });
</script>