mux-video script tag doesn't consistently fire native video events

[nwaughachukwuma]

Checklist

• Verified whether your issue exists in the latest version Mux Element(s) release: npm install @mux-elements/[element_name] or yarn @mux-elements/[element_name].
  • (NOTE: If the issue is not occurring in the latest version, we may not resolve it.)
• Confirmed that this issue hasn't already been filed.

Which Mux Elements/Packages has a bug?

• mux-video

Which browser(s) are you using?

• Chrome
• Safari
• Firefox

Which operating system(s) are you using?

macOS

How are you using Mux Elements?

• script tag

Describe the bug

Native video events e.g. loadedmetadata are inconsistently fired across different browsers.

Steps To Reproduce

in a svelte project:

1. add mux-video script tag to the root html e.g. app.html
2. create a /vid route and the following snippet
3. serve your app and visit ~/vid with your devtool open
4. you'll observe different behaviors on the following browsers:
   • chrome: loadedmetadata never fires. You can get the metadata on component mount though

     onMount(() => {
        if (muxVideoEl) {
            videoWidth = muxVideoEl.videoWidth
            videoHeight = muxVideoEl.videoHeight
            duration = muxVideoEl.duration
        }
     })

   • safari: loadedmetadata fires quite right but videoWidth = 0 and videoHeight = 0. Attempting to read the values on component mount returns 0 for all 3 variables.
   • firefox: same as chrome.

<script>
let src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
let duration
let videoWidth
let videoHeight
let muxVideoEl

const onloadedmetadata = () => {
  if (muxVideoEl) {
    duration = muxVideoEl.duration
    videoWidth = muxVideoEl.videoWidth
    videoHeight = muxVideoEl.videoHeight

    console.log('onloadedmetadata', { duration, videoWidth, videoHeight })
  }
}
</script>

<mux-video
  bind:this="{muxVideoEl}"
  src="{src}"
  controls
  preload="metadata"
  autoplay
  on:loadedmetadata="{onloadedmetadata}">
</mux-video>

<style>
mux-video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>

I should mention that the event fires right with the npm package.

I'm providing 2 links to code examples so that you can run it across many browsers as possible - for example safari is not compatible with stackblitz but works with svelte REPL. On svelte REPL, I provided 2 files Bug.svelte and Workaround.svelte.

Link to code example:

1. Stackblitz
2. SvelteKit REPL

The current behavior

Native video events don't fire as expected when using the script tag - focusing only on the loadedmetadata event for this issue. The workaround is waiting for the script to get loaded before rendering the mux-video tag. This means that one would need to load the script using javascript or any method that allows for access to the loaded event

The expected behavior

All native video events should fire usually and as expected without needing to hook to loaded event.

[luwes]

thanks for reporting this bug. I have reproduced this issue on my end.

it seems like you said, it only starts working once the script has been loaded and then the event is attached or in other words attaching video events only work after the custom element has been upgraded.

it's because the video events are still dispatched on the internal video element itself only and we don't dispatch on the mux-video custom element. will look into this soon.

[luwes]

also note that in plain HTML the workaround is as easy as putting the script tag without (async / defer) before the mux-video tag and adding events after will always work as expected. see https://codesandbox.io/s/mux-video-events-ku2rud

or bundling (import) the mux-video script before rendering the mux-video tag and it should work as expected.
https://svelte.dev/repl/1489d4bd3e404d5d9ecda3f996f426ad?version=3.46.1
(seems Svelte doesn't actually run the script in the head before the app code)

[nwaughachukwuma]

also note that in plain HTML the workaround is as easy as putting the script tag without (async / defer) before the mux-video tag and adding events after will always work as expected. see https://codesandbox.io/s/mux-video-events-ku2rud

Yeah, you're correct but we want to lazy-load the script - load on-demand

or bundling (import) the mux-video script before rendering the mux-video tag and it should work as expected.
https://svelte.dev/repl/1489d4bd3e404d5d9ecda3f996f426ad?version=3.46.1
(seems Svelte doesn't actually run the script in the head before the app code)

Yes that works, and it was made by me and referenced in the issue decription > SvelteKit REPL