当暂停播放按钮被按下时，防止HTML5视频继续播放

Question

我在网站上嵌入了一个视频，当用户播放视频时，我使用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>

- David Gard

---

有一个播放按钮在某个地方调用了video.play()吗？ - jackfrankland

是的，控件已经显示了，这就是视频播放的方式。但是我需要在视频全屏之前基本上阻止播放操作，然后再播放。我会更新问题以使其更清晰。谢谢。 - David Gard

请也发布一些 HTML。 - jackfrankland

已经在我的上一次编辑中完成了 :) - David Gard

Answer 1

实际上，这很简单：

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

- Pietro Coelho

Answer 2

因为您正在使用内置播放器控件，所以只要按下播放按钮，视频就会开始播放，我不认为您可以在此时点阻止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);
    }
});

- jackfrankland

---

这是一个很好的逻辑方法来解决问题，看起来完美地运作了。感谢您的帮助。 - David Gard

很高兴它能正常工作。我注意到在你点击它的那一刻可能会有一小段音频/视频播放，所以这并不理想。我想知道事件监听器是否绝对无法停止视频的播放，但至少在Chrome中似乎不行。 - jackfrankland

我也找到了一些参考资料表明它不是这样的，这真是遗憾；说实话，这似乎有点傻，但也许有一个很好的理由。然而，我真的不想编写完整的自定义控制栏，所以我会接受在Chrome中发生的分秒播放！Firefox和IE都似乎非常好。 - David Gard