jquery - 启动时如何暂停页面上所有正在播放的 VideoJS 实例？

Question

我现在想出了这个解决方案：

    var myPlayer1 = _V_("ID1");
    var myPlayer2 = _V_("ID2");
    ...
    ...

    var myFunc1 = function(){
        var myPlayer1 = this;

        myPlayer2.pause();
        myPlayer3.pause();
        myPlayer4.pause();
        ...
    };
    myPlayer1.on("play", myFunc1);

    var myFunc2 = function(){
        var myPlayer2 = this;

        myPlayer1.pause();
        myPlayer3.pause();
        myPlayer4.pause();
        ...
    };
    myPlayer2.on("play", myFunc2);

    ...

还有其他理智的方法吗？

谢谢。

Answer 1

在纯 JS上也一样：

var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
  media.addEventListener('play', function(event) {
    medias.forEach(function(media) {
      if(event.target != media) media.pause();
    });
  });
});

Answer 2

假设您使用 jQuery，您可以尝试此解决方案。

您可以尝试避免暂停当前未播放的视频。这可以通过在循环中添加另一个检查来完成 - 这里页面上的所有视频都会在另一个视频开始播放时暂停。

此外，可能有更好的方法来避免视频 ID（ ike $(this).player 或类似的东西），但这可以完成工作。

 $(".video-js").each(function (videoIndex) {
    var videoId = $(this).attr("id");

    _V_(videoId).ready(function(){
        this.on("play", function(e) {
            //pause other video
            $(".video-js").each(function (index) {
                if (videoIndex !== index) {
                    this.player.pause();
                }
            });
        });

    });
});

Answer 3

这是一个有效的解决方案，可以在单击播放时暂停页面上的所有其他 videojs 实例。

$(".video-js").each(function (videoIndex) {
    var videoId = $(this).attr("id");
    videojs(videoId).ready(function(){
        this.on("play", function(e) {
            $(".video-js").each(function (index) {
                if (videoIndex !== index) {
                    this.player.pause();
                }
            });
        });
    });
});

解决方案在这里找到。

Answer 4

我用这个做新的Videojs v5

$('.video-js').each(function () {
  videojs(this.id).ready(function () {
    myPlayer = this;
    myPlayer.play();
  });
});