search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.77k stars 71 forks source link

Rendition/audio/caption menu not working outside of documentation sandbox #844

Closed xrun1 closed 8 months ago

xrun1 commented 8 months ago

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."}