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>

Answer 1

由于您正在使用内置播放器控件，因此视频会在您按下播放时启动，而且我不相信您可以在此时阻止此操作。

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

否则，我唯一能想到的就是我在这里所做的：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);
    }
});

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

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

2 个答案: