videoJs 播放器在其他播放器完成初始化后无法正确初始化

Question

我有一个问题，我需要在初始化我的 videoJs 播放器之前找到媒体的持续时间。

为此，我一直在尝试通过在获取持续时间时加载带有媒体的隐藏播放器来获取持续时间，然后根据该持续时间设置选项以在第二个播放器中使用。

我发现如果我这样做，那么第二个播放器将无法正确初始化。

在我的示例中，我有两个相同的玩家，他们都具有相同的选项。唯一的区别是第一个在第一个之后初始化 1 秒。

var videoJsOptions = {
  controlBar: {
    progressControl: false,
    remainingTimeDisplay: false,
    durationDisplay: false,
    currentTimeDisplay: false,
    timeDivider: false,
  },
};

var player = videojs('my-video', videoJsOptions);
player.src('http://techslides.com/demos/sample-videos/small.mp4');
player.muted(true);
player.play();

window.setTimeout(() => {
  var player2 = videojs('my-video-1', videoJsOptions);
  player2.src('http://techslides.com/demos/sample-videos/small.mp4');
  player2.muted(true);
  player2.play();
}, 1000);

从截图中可以看出，第一个生成正确，控件滚动条隐藏，而第二个忽略这些设置，显示不正确。

任何人都可以在这里帮助我，我很高兴销毁第一个视频 Js 播放器，但处理似乎无法解决问题。

这里的视频由于某种原因没有加载，但您仍然可以看到这个问题。

https://jsfiddle.net/3kuqb6cL/2/

Answer 1

在他们的文档中，它说：

By default, when your web page finishes loading, Video.js will scan for media elements that have the data-setup attribute. The data-setup attribute is used to pass options to Video.js.

因此，如果您只是删除 data-setup 属性，它将使用您传递的选项。否则，它不会。我猜它只是由于某些竞争条件而恰好在第一个上工作 - 你碰巧在自动设置到达它之前设置它。

<head>
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    preload="auto"
    width="640"
    height="264"
    controls
  ></video>

  <video
    id="my-video-1"
    class="video-js"
    preload="auto"
    width="640"
    height="264"
    controls
  ></video>

  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

  <script>
    var videoJsOptions = {
      controlBar: {
        progressControl: false,
        remainingTimeDisplay: false,
        durationDisplay: false,
        currentTimeDisplay: false,
        timeDivider: false,
      },
    };

    var player = videojs('#my-video', videoJsOptions);
    player.src('http://techslides.com/demos/sample-videos/small.mp4');
    player.muted(true);
    player.play();

    window.setTimeout(() => {
      var player2 = videojs('#my-video-1', videoJsOptions);
      player2.src('http://techslides.com/demos/sample-videos/small.mp4');
      player2.muted(true);
      player2.play();
    }, 1000);
  </script>
</body>

videoJs 播放器在其他播放器完成初始化后无法正确初始化

videoJs player does not initialise properly after a different player has finished initialising

javascript

video.js