暂停播放按钮时阻止播放 HTML5 视频答案

【问题标题】：Prevent an HTML5 video from playing when the play button is paused暂停播放按钮时阻止播放 HTML5 视频
【发布时间】：2014-04-13 14:23:40
【问题描述】：

我有一个嵌入网站的视频，当用户播放视频时，我有 JS 将视频扩展到网站的宽度（然后在暂停时缩小）。

正在使用内置控件播放/暂停视频，但是当视频在展开时播放时，它看起来很奇怪，因此我希望在展开之前阻止播放。

但是，preventDefault(); 在这种情况下似乎不起作用。有谁知道实现这一目标的方法？谢谢。

这是我的 JS -

$(document).ready(function(){

    var video = $('#intro-video');

    video.on('play', function(e){

        e.preventDefault();

        video.animate({
            height:     '506',
            width:      '900'
        }, 500);

    });

    video.on('pause', function(e){

        video.animate({
            height:     '200',
            width:      '356'
        }, 500);

    });

});

这里是 HTML 源代码 -

<video id="intro-video" controls="">
    <source type="video/mp4" src="http://www.somesite.com/video.mp4"></source>
    Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

【问题讨论】：

是否有播放按钮在某处调用 video.play()？
是的，控件已显示，这就是视频的播放方式。但我需要基本上阻止播放动作，直到视频全尺寸，然后播放。我会更新问题以使其更清楚。谢谢。
请也发布一些 HTML。
在我上次的编辑中已经完成 :)

标签： javascript html video preventdefault

【解决方案1】：

因为您使用的是内置播放器控件，所以视频会在您按下播放时开始播放，我不相信您现在可以在 javascript 中阻止该事件。

我建议您考虑为播放器创建自己的控件。这样就可以监听播放按钮的点击事件，直接控制视频的播放。

否则，我唯一能想到的就是我在这里所做的：JSFiddle

基本上，当视频开始播放时，暂停它。做动画，然后在动画完成后播放。我创建了一个变量，因此当我们手动暂停它时不会触发暂停动画：

var video = $('#intro-video');
var enlarged = false;

video.on('play', function(e){
    if (!enlarged){
        video[0].pause();
        video.animate({
            height:     '506',
            width:      '900'
        }, 500, function() {
            enlarged = true;
            video[0].play();
        });
    }
});

video.on('pause', function(e){
    if (enlarged) {
        enlarged = false;
        video.animate({
            height:     '200',
            width:      '356'
        }, 500);
    }
});

【讨论】：

这是解决问题的一种很好的逻辑方法，而且看起来效果很好。感谢您的帮助。
很高兴它有效。我注意到在您单击它时可能会播放一瞬间的音频/视频 - 所以它并不理想。我想知道事件监听器是否绝对不可能停止播放视频，但至少在 chrome 中，它似乎不可能。
我发现一些参考资料也表明它不是，这很遗憾；老实说，这似乎有点愚蠢，但也许有一个很好的理由。但是，我真的不想编写一个完整的自定义控制栏，所以我将在 Chrome 中播放瞬间！ Firefox 和 IE 看起来都很好。

【解决方案2】：

其实很简单：

let videoShouldNotPlay = true
video.onplay = function () {
    if (videoShouldNotPlay) {
      video.pause()
      video.currentTime = 0 // set to the current time needed
      alert("You can't play the video right now")
      return
    }
}

【讨论】：