-
|
I'm trying to use the following code: <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@3/+esm"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@1/+esm"></script>
</head>
<body>
<media-controller>
<hls-video
src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8"
slot="media"
crossorigin
muted
></hls-video>
<media-rendition-menu hidden anchor="auto"></media-rendition-menu>
<media-audio-track-menu hidden anchor="auto"></media-audio-track-menu>
<media-captions-menu hidden anchor="auto"></media-captions-menu>
<media-control-bar>
<media-play-button></media-play-button>
<media-rendition-menu-button></media-rendition-menu-button>
<media-audio-track-menu-button></media-audio-track-menu-button>
<media-captions-menu-button></media-captions-menu-button>
</media-control-bar>
</media-controller>
</body>
</html>When pasted in the HLS documentation page's editor, it works fine, but in a local file, the rendition menu only shows "Auto" while the audio and caption buttons do nothing. It's also impossible to see what the docs editor is doing different because the "open sandbox" link returns this: {"error":"This endpoint requires the params `files` or `parameters` in order to work. See https://codesandbox.io/docs/importing#create-wizard for more details."} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
could you check if the hls-video preload="auto" attribute makes any difference? here is an example of it working with rendition menu for renditions and audio tracks to work the video metadata has to be loaded. if preload is none, that information is not known yet until the video is loaded by a user action or preload is changed via API. |
Beta Was this translation helpful? Give feedback.
-
|
sorry about that, made it public https://codesandbox.io/p/sandbox/media-chrome-rendition-menu-zg32wv?file=%2Findex.html |
Beta Was this translation helpful? Give feedback.
-
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@3/+esm"></script>Adding this to the top is enough to break it. I see media-chrome isn't added the same way as mux-video for which there's no internal folder. Where does this media-chrome comes from? |
Beta Was this translation helpful? Give feedback.
-
|
hmm, I'm not seeing that. this works ok on my end with the JS link. it's from this example if you click the bottom right button "Open Sandbox" |
Beta Was this translation helpful? Give feedback.
-
|
I got it, it only works if you place the media-chrome script tag after mux or hls-video-element's tag, which is the opposite of the example here. It didn't seem to matter before 3.0.0, is this intended? Thank you for your help. |
Beta Was this translation helpful? Give feedback.
-
|
thanks for letting us know, that's not intended. we'll have a look at this soon! |
Beta Was this translation helpful? Give feedback.
-
|
this should be fixed in the meantime. |
Beta Was this translation helpful? Give feedback.
I got it, it only works if you place the media-chrome script tag after mux or hls-video-element's tag, which is the opposite of the example here. It didn't seem to matter before 3.0.0, is this intended? Thank you for your help.