search

muxinc / elements

Custom elements for working with media in the browser that Just Work™
https://elements-demo-nextjs.vercel.app
MIT License
236 stars 45 forks source link

Bug: mux-video with hls: Error: Media element src was set while attaching MediaSource when adding tracks #933

Open endymion1818 opened 3 months ago

endymion1818 commented 3 months ago

Is there an existing issue for this?

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video

Which browsers are you using?

Chrome

Which operating systems are you using?

macOS

Description

I'm getting an error when supplying tracks to the mux-video web component.

[error] > Media element src was set while attaching MediaSource Here's some example code:

<mux-video src="https://some-hls-source"

The code I'm using in my component is more complex than this and involves the use of media-chrome, but even when I use straight up HTML without my wrapper component and the hosted version of mux-video it still occurs.

There's no documentation on the mux-video readme about s, but since it's an extension of HTML

How do I provide the captions, chapters etc without triggering this error?

Reduced test case

https://codepen.io/endymion1818/pen/RwmKQpq

Steps to reproduce

  1. Load the page
  2. See error in console

Current Behavior

An error is logged to the console although player renders and works as expected.

Expected Behavior

No error logged to the console.

Errors

[error] > Media element src was set while attaching MediaSource

What version of the package are you using?

v0.19.0

endymion1818 commented 3 months ago

It looks like it could be a race condition because tracks need to download their src files asynchronously yet the player seems to render straight away

Screenshot 2024-06-06 at 10 34 44
luwes commented 2 months ago

I see the error but does this break anything in your program? seems the captions still work as expected.

it's a strange error because the media element is different from the track element. https://github.com/video-dev/hls.js/pull/5206/files

seems almost like that event bubbles up or something and the track src is wrongly compared with the media element src which is a blob.

endymion1818 commented 2 months ago

It doesn't break you're right, but we get a console error on each load, which is going to be a drain on our bug tracker. It will cause similar issues for third parties that embed our player too so we really want to avoid it if at all possible.

luwes commented 2 months ago

totally get that. how I see it currently is that it's a bug in hls.js, could you open an issue there and mention this ticket? we'll follow it along.

endymion1818 commented 2 months ago

Thanks, I'm opening an issue there however some information I don't think I have access to: what is the hls.js configuration?

Also I've developed a new test case that outputs more information to the console, is this information more helpful? https://embed-mediamanager-io-v3.pages.dev/storybook/?path=/story/media-manager-embeds--player