video Js проигрыватель не инициализируется должным образом после завершения инициализации другого проигрывателя - PullRequest
Новая
       123

video Js проигрыватель не инициализируется должным образом после завершения инициализации другого проигрывателя

0 голосов
/ 06 августа 2020

У меня проблема, когда мне нужно определить продолжительность мультимедиа перед инициализацией моего видео Js player.

Для этого я пытался получить продолжительность, загрузив скрытый проигрыватель с помощью мультимедиа для получения продолжительности, а затем настройки параметров, основанных на этой продолжительности, для использования во втором проигрывателе. 1006 * В моем примере у меня есть два идентичных игрока с одинаковыми параметрами. Единственное отличие состоит в том, что один инициализируется через 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);

Вы можете видеть на снимке экрана, что первый генерируется правильно, при скрытой полосе прокрутки управления, тогда как второй игнорирует их. настройки и неправильно отображает полоску.

enter image description here

Can anyone help me here, I am happy to destroy the first video Js player but disposing does not seem to fix the issue.

The videos are not loading for some reason on here, but you can still see the issue.

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

1 Ответ

2 голосов
/ 06 августа 2020

В их документах написано:

По умолчанию, когда ваша веб-страница завершает загрузку, 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>
...