Трек субтитров HTML5 Элемент не обновляется в видео - PullRequest
Новая
       106

Трек субтитров HTML5 Элемент не обновляется в видео

0 голосов
/ 11 апреля 2020

Я столкнулся с проблемой, мне нужно динамически изменить источник дорожки субтитров с javascript.

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

Это html: 

<video style="width: 50%;" class="m-5" id="vid" controls>
      <track src="oldPath.vtt" id="subtitleTrack" label="English" kind="subtitles" srclang="en" default />
</video>

Это Javascript: 

let subtitleTrack = document.getElementById("subtitleTrack");

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath;
  //....
}

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

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

Обновление

После дальнейшего исследования проблема, похоже, связана с проблемами кэширования. Мне нужно, чтобы новый путь был таким же старым ( путь имеет новые обновления локально ), но браузер берет свою копию из кэша, не обновляя ее из локальных файлов. __

Второе обновление

Спасибо за ответ @ Terry.

Я попытался добавить управление версиями к источнику, но ничего не получается.

Проверьте размер ответа, ?v=2 ответ пустой. Network Screenshot

PS Проект электронный проект. В любом случае, я не думаю, что это может быть частью проблемы.

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

Как вы упомянули в своих комментариях (и в обновленном вопросе), что вы используете точно такой же путь дорожки. Это приведет к тому, что браузер будет извлекать данные из кэша, поскольку путь к файлу не изменился: хорошей идеей будет простое добавление строки запроса на удаление кэша к атрибуту src, чтобы браузер игнорировал кэш: 

let subtitleTrack = document.getElementById("subtitleTrack");

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath + '?t=' + new Date().getTime();
  //....
}

Конечно, если вам удобнее использовать литералы шаблонов, это может быть более читабельным: 

subtitleTrack.src = `${newTrackPath}?t=${new Date().getTime()}`;
0 голосов
/ 12 апреля 2020

Я не понял, понял проблему.

проблема была в том, что я пытался получить доступ к файлу субтитров, в то время как другая функция редактировала его. Поэтому я добавил функцию обратного вызова, чтобы предотвратить это.

А также применив ответ @ Терри, чтобы добавить этот запрос очистки кэша.

Теперь он работает после применения вышеуказанных изменений.

...