Crossorigin errors when loading VTT file

Question

I\'m new to using the audio tag in HTML 5 and wanted to build a player. I wanted to test using a VTT file in a track tag to see how closed captioning could work.

Here is

Answer 1

Here's how I get this working in my web-component (lit-html based) by fetching the webVTT via a seperate HTTP call and injecting the content into the SRC property of the element whenever the subtitle/metadata track changes or is rendered:

  updated(changedProperties) {
    if (changedProperties.has('metadata')) {
      const tracks = this.shadowRoot.querySelectorAll('track');
      tracks.forEach(track => this.loadTrackWithAjax(track))
      }
    }
  

  // eslint-disable-next-line class-methods-use-this
  loadTrackWithAjax(track) {
    const 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.
        const blob = new Blob([this.responseText], { type: 'text/vtt' });
        track.setAttribute('src', URL.createObjectURL(blob));
      }
    };
    xhttp.open('GET', track.src, true);
    xhttp.send();
  }

My videos and tracks are stored in the same firebase storage bucket but the browser refused to load the tracks even when changing the CORS and crossorigin settings (which stopped even the videos from loading).