static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
    // Create the UI
    const player = new shaka.Player();
    const ui = new shaka.ui.Overlay(player,
        shaka.util.Dom.asHTMLElement(container),
        shaka.util.Dom.asHTMLMediaElement(video),
        vrCanvas ? shaka.util.Dom.asHTMLCanvasElement(vrCanvas) : null);

    // Attach Canvas used for LCEVC Decoding
    player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));

    if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
      ui.getControls().setEnabledNativeControls(true);
    }

    // Get the source and load it
    // Source can be specified either on the video element:
    //  <video src='foo.m2u8'></video>
    // or as a separate element inside the video element:
    //  <video>
    //    <source src='foo.m2u8'/>
    //  </video>
    // It should not be specified on both.
    const urls = [];
    const src = video.getAttribute('src');
    if (src) {
      urls.push(src);
      video.removeAttribute('src');
    }

    for (const source of video.getElementsByTagName('source')) {
      urls.push(/** @type {!HTMLSourceElement} */ (source).src);
      video.removeChild(source);
    }

    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));

    for (const url of urls) {
      try { // eslint-disable-next-line no-await-in-loop
        await ui.getControls().getPlayer().load(url);
        break;
      } catch (e) {
        shaka.log.error('Error auto-loading asset', e);
      }
    }
  }
@param {!Element} container
@param {!Element} video
@param {!Element} lcevcCanvas
@param {?Element} vrCanvas
@private