Использование видео. js Я пытаюсь использовать переменные, а не текст, для предоставления URL источника видео и URL плаката (и, в конечном итоге, элемента субтитров (дорожки)

Question

Это часть видео html Я использую ....

<video id="my-video" class="video-js" controls preload="none" width="640" height="264" poster=""  data-setup="{}"> <source src="" type="video/mp4" />

... и это мой js для установки источника видео ...

var mySource = window.localStorage.getItem("mySource");
document.querySelector("#my-video > source").src = mySource;

.... который работает, после моды. Он отображает два сообщения об ошибках, второе слишком быстро для просмотра, но первое, которое говорит: «Не найдено видео с поддерживаемым форматом и типом mime», не является идеальным. После этого он загружает и воспроизводит правильное видео.

Код плаката, который работает - он показывает правильный плакат, выглядит следующим образом ...

var myPoster = window.localStorage.getItem("myPoster");
var myPlayer = videojs('my-video'); myPlayer.poster(myPoster);

Однако, включая это фрагмент заставляет видео не быть найденным!

У кого-нибудь есть лучшее решение этой проблемы (в идеале также включить элемент субтитров (<track>))?

Answer 1

С Video. js Вы должны инициализировать проигрыватель, а затем использовать его API для установки источников вместо непосредственного изменения элементов DOM.

var myPlayer = videojs('my-video');
myPlayer.ready(function() {
  myPlayer.poster(myPoster);
  myPlayer.src({
    type: 'video/mp4',
    src: mySource
  });
  myPlayer.addRemoteTextTrack({
    src: myTrack,
    type: 'subtitles',
    language: 'en'
  });
});