点击HTML5视频元素播放，暂停视频，中断播放按钮

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

var videoPlayer=document.getElementById（'videoPlayer'）；
//自动播放，半音量。
播放
videoPlayer.volume=0.5；
//播放/暂停。
videoPlayer.addEventListener（'click'，函数（）{
如果（videoPlayer.paused==false）{
暂停（）；
videoPlayer.firstChild.nodeValue='Play'；
}否则{
视频播放器；
videoPlayer.firstChild.nodeValue='Pause'；
}
});

---

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

问题似乎是

元素内部冒泡。。。因此，当您单击“播放”按钮时，代码触发，然后播放按钮本身被触发：(

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

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

，大小适合控件出现的位置……因此，如果您单击div，那么脚本控件将播放/暂停，但是如果用户单击控件本身，那么

元素将为您处理

下面的示例是为我的视频调整大小的，因此您可能需要调整相对

的大小，但它应该可以帮助您开始

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

var v=document.getElementById（'videoPlayer'）；
var vv=document.getElementById（'vOverlay'）；
v、 play（）
v、 体积=0.5；
v、 firstChild.nodeValue=“Play”；
vv.addEventListener（'click'，函数（e）{
如果（！v.暂停）{
console.log（“暂停播放”）；
v、 暂停（）；
v、 firstChild.nodeValue='Pause'；
}否则{
log（“开始播放”）
v、 play（）；
v、 firstChild.nodeValue='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";
      }
    };

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

有人能解决这个问题吗？

HTML:

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

---

添加

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;
});

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

---

我在做这件事时遇到了无数问题，但最终找到了一个可行的解决方案

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

---

跟进ios lizard的想法：

我发现视频上的控件约为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();
    }
});

---

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

最简单的形式是使用

onclick

监听器：

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

这个怎么样

<video class="play-video" muted onclick="this.paused?this.play():this.pause();">
   <source src="" type="video/mp4">
</video>

---

必须将此代码分开才能正常工作，否则只需单击一下即可暂停并播放

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

---

在Chromium 89和Firefox 86上单击body works，除了第一次单击Chromium的

preload=“none”

在这些浏览器中：

• Firefox的工作非常完美：所有点击视频主体的操作都会切换播放/暂停，就像相应点击控件一样。此外，它还显示了一个直观的占位符，让用户清楚地知道点击会起作用：

• Chromium有一个缺陷，第一次单击“无视频正文”对包含

  preload=“none”

  的视频不起作用。但是，进一步单击会起作用
  而且它的占位符并不能清楚地表明你可以在任何地方点击播放（你无论如何都不能，希望他们能在bug修复后添加一个合适的占位符）：

因此，最好的选择是通过在第一次单击时进行播放，以最低限度地解决该缺陷：

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Min</title>
</head>
<body>
<video id="vid" height="200" controls="controls" preload="none">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>
<script>
let first = true;
document.getElementById('vid').addEventListener('click', (e) => {
  if (first) {
    e.target.play();
  }
  first = false;
});
</script>
</body>
</html>

分钟
让第一个=真；
document.getElementById（'vid'）。addEventListener（'click'，（e）=>{
如果（第一）{
e、 target.play（）；
}
第一个=假；
});

这也不会以任何方式破坏Firefox的正确行为

TODO:通过添加一个叠加div来完善该解决方案，该叠加div清楚地指示初始点击播放将起作用，例如：但保留控件

在：of do

onclick=“this.play（）”

中显示的JavaScript解决方案实际上会在第一次播放+暂停后中断这些浏览器上的播放，因此我不推荐这样做

---

我内心邪恶的部分想认为Chrome的行为更糟糕，因为YouTube视频是唯一对他们重要的视频>：-）

这在Firefox、Chrome和Safari中对我非常有效。除了我把“div”改成了“video”。谢谢，很高兴这帮了别人。还有，接得好。你说得对，应该是“视频”而不是“div”。我的错。除非我添加了

returnfalse，否则它在Chrome35的Android版中不起作用除了全屏按钮停止工作外，这对我有效…：（为什么？ios lizard您使用的是jQuery还是Vanilla JavaScript版本。全屏按钮在我当前的实现中使用的是上述jQuery版本的代码。我使用的是jQuery 2.1.0，jQuery代码在iPad上除外。我更改了
$（文档）。on（'click'，'video'，…
为
$（'video'）。on（'click'，…
，奇怪的是，它也开始在iPad上工作。请记住，最新的firefox版本对暂停有现成的支持/
<video class="play-video" muted onclick="this.paused?this.play():this.pause();">
   <source src="" type="video/mp4">
</video>

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

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Min</title>
</head>
<body>
<video id="vid" height="200" controls="controls" preload="none">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>
<script>
let first = true;
document.getElementById('vid').addEventListener('click', (e) => {
  if (first) {
    e.target.play();
  }
  first = false;
});
</script>
</body>
</html>