Как включить CORS для html5 видео загрузки файла vtt?

Моя потребность

Элемент html5 video загружает как видео, так и файл vtt, сохраненные в другом домене.

Эта проблема

vtt не загружается и ошибка Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.

Мое расследование

Я знаю, что необходимо использовать CORS, чтобы успешно загружать vtt в html5.

Я включил CORS на стороне сервера для запросов из любого домена.

Некоторые статьи говорят, что добавление crossorigin или же crossorigin="anonymous" в `element может выполнять работу, но это не работает. Либо видео вообще не загружается, либо появляются разные ошибки

Я поставил свой код здесь ниже

<body>
  <div class="container">
    <video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
      <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
    </video>
</body>

Источник

1 ответ

Надеюсь, это поможет следующему человеку наткнуться на этот ТАК вопрос. Я обнаружил, что IE (10 и 11) не поддерживает загрузку файла VTT из разных источников для<track>, даже если CORS включен. Чтобы добавить поддержку подписей в IE, мне пришлось использовать сценарий, подобный приведенному ниже.

Этот сценарий загружает каждый файл VTT через AJAX, создает URL-адрес большого двоичного объекта и заменяет каждый<track> src с соответствующим URL-адресом большого двоичного объекта.

window.addEventListener("load", function() {
  if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
    // Not IE, do nothing.
    return;
  }

  var tracks = document.querySelectorAll("track")

  for (var i = 0; i < tracks.length; i++) {
    loadTrackWithAjax(tracks[i]);
  }
});

function loadTrackWithAjax(track) {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && this.responseText) {
      // If VTT fetch succeeded, replace the src with a BLOB URL.
      var blob = new Blob([this.responseText], { type: 'text/vtt' });
      track.setAttribute("src", URL.createObjectURL(blob));
    }
  };
  xhttp.open("GET", track.src, true);
  xhttp.send();
}
<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>

Источник

Я могу подтвердить, что crossorigin=anonymous атрибут на video Элемент действительно загружает текстовую дорожку, как и ожидалось.

Дайте этому шанс.

<video id="myvideo" controls preload="auto" width="640" height="264" autoplay crossorigin="anomymous"> <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source> <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default> </video>

Наконец, помните, что вы должны использовать веб-сервер для обслуживания этого фрагмента HTML - это не может быть сделано локально (т.е. file//).

Если вы знакомы с node - установить http-server, бежать с --cors и используй нгрок.

Источник
Другие вопросы по тегам