46

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

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

4

10 回答 10

110

最简单的形式是使用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();"

演示:

<video height="200" controls="controls" preload="none" onclick="this.play()">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>

在铬 89 上:

  • onclick="this.play()"在初始播放+暂停(单击控件仍然有效)后,通过单击主体(而不是控件)来防止视频再次播放,这通常是不可取的。这可能是因为回调使它播放,然后事件传播并且浏览器立即重新暂停它。
  • 没有的默认行为onclick="this.play()"是:初始身体点击在身体上播放不起作用,但在初始播放后点击身体确实切换播放/暂停
  • onclick="this.paused ? this.play() : this.pause();"使初始播放后的身体点击不起作用既不播放也不暂停,大概类似于发生的情况onclick="this.play()"
于 2016-02-22T20:53:35.000 回答
51

HTML:

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

JAVASCRIPT:“JQUERY”

$('.video').click(function(){this.paused?this.play():this.pause();});
于 2013-12-06T22:28:19.123 回答
15

添加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;
};
于 2014-01-06T16:37:35.160 回答
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();

    });
于 2014-03-12T21:12:33.830 回答
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";
      }
    };

尽管寻找仍然很有趣,但至少与播放控制的混乱已经消失了。希望这可以帮助。

有人有解决方案吗?

于 2013-10-30T10:42:11.723 回答
2

跟进 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(控件的高度),则意味着用户单击了控件以外的其他位置因此我们暂停或播放视频。

于 2014-07-13T18:14:54.730 回答
2

这个怎么样

<video class="play-video" muted onclick="this.paused?this.play():this.pause();">
   <source src="" type="video/mp4">
</video>
于 2020-12-02T05:28:47.857 回答
2

在 Chromium 89 和 Firefox 86 上点击 body works,除了第一次点击preload="none"for 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/895245onclick="this.play()"实际上在第一次播放后中断播放+暂停在这些浏览器上工作,所以我不推荐它。

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

于 2021-03-25T18:37:33.580 回答
1

问题似乎是元素内部冒泡<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>
于 2013-08-22T05:42:59.027 回答
0

必须将此代码分开才能正常工作,否则它可以一键暂停和播放!

 $('video').click(function(){this.played ? this.pause() ;});
  $('video').click(function(){this.paused ? this.play() ;});
于 2020-12-13T06:56:13.360 回答