fix(UI): Fix auto-load with source tags (#7430)

In 4425dca, we broke auto-loading content with `<source>` tags or
`src=` in the UI, such that we tried to load content before we had
attached a video element. That was almost a year ago. Oops!

This also adds an appropriate unit test.

Backported to v4.11.x

test/ui/ui_unit.js

@@ -70,6 +70,60 @@ describe('UI', () => {
       });
     });
 
+    describe('set up with one container and src=', () => {
+      /** @type {!HTMLElement} */
+      let container;
+      /** @type {!HTMLVideoElement} */
+      let video;
+
+      beforeEach(async () => {
+        container =
+          /** @type {!HTMLElement} */ (document.createElement('div'));
+        document.body.appendChild(container);
+
+        video = shaka.test.UiUtils.createVideoElement();
+        video.src = 'test:sintel_multi_lingual_multi_res';
+        container.appendChild(video);
+
+        await UiUtils.createUIThroughDOMAutoSetup(
+            [container], [video]);
+      });
+
+      it('has loaded the video', () => {
+        expect(video.duration).not.toBeNaN();
+        expect(video.duration).not.toBe(0);
+      });
+    });
+
+    describe('set up with one container and source element', () => {
+      /** @type {!HTMLElement} */
+      let container;
+      /** @type {!HTMLVideoElement} */
+      let video;
+
+      beforeEach(async () => {
+        container =
+          /** @type {!HTMLElement} */ (document.createElement('div'));
+        document.body.appendChild(container);
+
+        video = shaka.test.UiUtils.createVideoElement();
+        container.appendChild(video);
+
+        const sourceElement = /** @type {!HTMLSourceElement} */(
+          document.createElement('source'));
+        sourceElement.src = 'test:sintel_multi_lingual_multi_res';
+        video.appendChild(sourceElement);
+
+        await UiUtils.createUIThroughDOMAutoSetup(
+            [container], [video]);
+      });
+
+      it('has loaded the video', () => {
+        expect(video.duration).not.toBeNaN();
+        expect(video.duration).not.toBe(0);
+      });
+    });
+
     describe('set up with several containers', () => {
       /** @type {!HTMLElement} */
       let container1;

ui/ui.js

@@ -493,6 +493,8 @@ shaka.ui.Overlay = class {
       video.removeAttribute('src');
     }
 
+    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
+
     for (const elem of video.querySelectorAll('source')) {
       try { // eslint-disable-next-line no-await-in-loop
         await ui.getControls().getPlayer().load(elem.getAttribute('src'));
@@ -501,8 +503,6 @@ shaka.ui.Overlay = class {
         shaka.log.error('Error auto-loading asset', e);
       }
     }
-
-    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
   }