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

假设你使用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 2

纯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 3

我将此用于新的Videojs v5

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

Answer 4

这是一种可行的解决方案，可以在单击播放时暂停页面上的所有其他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();
                }
            });
        });
    });
});

找到了解决方法here。

当一个人启动时，如何在页面上暂停所有播放的VideoJS实例？

4 个答案: