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

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

我试着让视频播放和暂停，就像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>

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

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

7 个解决方案

#1

The simplest form is to use the onclick listener:

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

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

No jQuery or complicated Javascript code needed.

无需jQuery或复杂的Javascript代码。

Play/Pause can be done with onclick="this.paused ? this.play() : this.pause();".

可以使用onclick="this。停了吗?this.play():this.pause();。

#2

Not to bring up an old post but I landed on this question in my search for the same solution. I ended up coming up with something of my own. Figured I'd contribute.

我并没有提出一个旧的帖子，但我在这个问题上找到了同样的解决方案。我最后想出了我自己的东西。觉得我可以贡献。

HTML:

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

JAVASCRIPT: "JQUERY"

JAVASCRIPT:“JQUERY”

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

#3

Adding return false; worked for me:

添加返回false;为我工作:

jQuery version:

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

香草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;
};

#4

I had this same problem and solved it by adding an event handler for the play action in addition to the click action. I hide the controls while playing to avoid the pause button issue.

我遇到了同样的问题，并通过在单击操作中添加play操作的事件处理程序来解决它。我在播放时隐藏控件，以避免暂停按钮的问题。

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

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

Seeking still acts funny though, but at least the confusion with the play control is gone. Hope this helps.

虽然寻找仍然很有趣，但至少游戏控制的混乱已经消失了。希望这个有帮助。

Anyone have a solution to that?

有人能解决这个问题吗?

#5

I had countless issues doing this but finally came up with a solution that works.

我有无数的问题要做，但最终想出了一个可行的解决方案。

Basically the code below is adding a click handler to the video but ignoring all the clicks on the lower part (0.82 is arbitrary but seems to work on all sizes).

下面的代码基本上是在视频中添加一个点击处理程序，但是忽略了下一部分的所有点击(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();

    });

#6

The problem appears to be internal bubbling within the <video> element ... so when you click on the "Play" button the code triggers and then the play button itself get triggered :(

问题出现在 <视频> 元素的内部气泡…所以当你点击“播放”按钮时，代码触发，然后播放按钮本身被触发:

I couldn't find a simple (reliable) way to stop the click bubbling through (logic tells me there should be a way, but... it escapes me right now)

我找不到一个简单(可靠)的方法来阻止点击冒泡(逻辑告诉我应该有办法，但是……)我现在想不起来了)

Anyway, the solution I found to this was to put a transparent <div> over the video sized to fit down to where the controls appear... so if you click on the div then your script controls play/pause but if the user clicks on the controls themselves then the <video> element handles that for you.

无论如何，我找到的解决方案是在视频大小上放一个透明的

，以适应控件出现的地方……所以如果你点击这个div，你的脚本就会控制播放/暂停，但是如果用户自己点击控件，那么

The sample below was sized for my video so you may need to juggle sizes of the relative <div>s but it should get you started

下面的示例大小适合我的视频，因此您可能需要处理相对

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>

#7

Following up on ios-lizard's idea:

跟进ios-蜥蜴的想法:

I found out that the controls on the video are about 35 pixels. This is what I did:

我发现视频上的控件大约是35像素。这就是我所做的:

$(this).on("click", function(event) {
    console.log("clicked");
    var offset = $(this).offset();
    var height = $(this).height();
    var y = (event.pageY - offset.top - height) * -1;
    if (y > 35) {
        this.paused ? this.play() : this.pause();
    }
});

Basically, it finds the position of the click relative to the element. I multiplied it by -1 to make it positive. If the value was greater than 35 (the height of the controls) that means that the user click somewhere else than the controls Therefore we pause or play the video.

基本上，它找到相对于元素的点击位置。我乘以-1，使它为正。如果值大于35(控件的高度)，这意味着用户单击其他地方而不是控件，因此我们暂停或播放视频。

#1