javascript - 如何在开始时停止 HTML5 中的所有其他视频

Question

抱歉我的英语不好。

我的网页中有很多视频项，当我开始其中一个时，我希望所有其他视频停止播放，我希望我可以从一个视频切换到另一个

这是我的情况:

网页:

<video id="..." width="352px" height="288px" poster="..." preload="none" controls="">
    <source src="..." type="video/webm"></source>
</video>

Javascript:

$('video').off('canplay').on('canplay', function() {
   this.play();
});

$('video').off('canplaythrough').on('canplaythrough', function() {
   this.play();
});

$('video').off('waiting').on('waiting', function() {
   this.play();
});

我不希望该视频继续暂停，我希望所有其他视频都处于与加载页面时相同的情况(上面带有播放按钮的灰色图像)

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            // Maybe here the solution...
        }
    });
});

谢谢

Answer 1

如果您想知道如何停止 HTML5 视频，您只需要 pause() 它们并将它们的 currentTime 属性设置为 0；

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            this.pause();
            this.currentTime = 0;
        }
    });
});

或者您可以调用 this.load() 而不是 pause() 和重置 currentTime，这将重置视频并再次显示海报。