Rendition/audio/caption menu not working outside of documentation sandbox
xrun1 opened this issue · comments
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."}