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

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

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

但是，寻求仍然行为有趣，但至少与游戏控制的混淆消失了。希望这会有所帮助。

任何人都有解决方案吗？

Answer 5

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

基本上下面的代码是为视频添加点击处理程序，但忽略了下半部分的所有点击（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 6

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

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

无论如何，我发现的解决方案是在视频大小上放置一个透明的<div>以适应控件的显示位置...所以如果你单击div然后你的脚本控制播放/暂停但如果用户点击控件本身，则<video>元素会为您处理。

以下示例的大小适合我的视频，因此您可能需要处理相对<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>

Answer 7

跟进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（控件的高度），则表示用户单击控件以外的其他位置，因此我们暂停或播放视频。

Answer 8

这个怎么样

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

Answer 9

必须分开此代码才能正常工作，或者一键停顿并播放！

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

Answer 10

在 Chromium 89 和 Firefox 86 上点击正文，除了第一次点击 preload="none" 为 Chromium

在这些浏览器中：

Firefox 完美运行：所有点击视频正文切换播放/暂停，就像点击控件一样。此外，它还显示了一个直观的占位符，让用户清楚地知道点击会起作用：
Chromium 有一个错误，即第一次点击无视频正文对具有 preload="none" 的视频不起作用。但是，进一步点击有效。

它的占位符并没有说明你可以在任何地方点击播放（无论如何你不能，希望他们在错误得到修复时添加一个合适的占位符）：

因此，最好的选择是通过仅在第一次点击时播放来最低限度地解决该错误：

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

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

TODO：通过添加一个覆盖 div 来完善该解决方法，该 div 清楚地表明初始点击播放将起作用，例如沿线：https://codepen.io/wizaRd_Mockingjay/pen/NVGpep 但保留控制权。

JavaScript 解决方案显示在：https://stackoverflow.com/a/35563612/895245 of do onclick="this.play()" 实际上在第一次播放后中断播放 + 暂停在这些浏览器上工作，所以我不推荐它。

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

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

10 个答案: