Giters

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.

Home Page:https://media-chrome.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

xrun1 opened this issue · comments

commented

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