时间戳

首页 > 解决方案 > 在其他播放器完成初始化后，videoJs 播放器无法正确初始化

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

问题描述

我有一个问题，我需要在初始化我的 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/

标签： javascriptvideo.js

解决方案

在他们的文档中，它说：

默认情况下，当您的网页完成加载时，Video.js 将扫描具有 data-setup 属性的媒体元素。data-setup 属性用于将选项传递给 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>

推荐阅读