<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>HLS WebM test with codec</title>
    </head>
    <body>
        <h1>HLS WebM test with codec</h1>

        <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with Opus audio marked as mp4a.ad:</p>
        <video id=hls1 controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=av-opus-mp4.m3u8>
        </video>
        <p id=err></p>

        <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with Opus audio marked as opus:</p>
        <video id=hls2 controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=av-opusb-mp4.m3u8>
        </video>
        <p id=err2></p>

        <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with Opus audio marked as Opus:</p>
        <video id=hls3 controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=av-opusc-mp4.m3u8>
        </video>
        <p id=err3></p>

        <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with Opus audio marked as Opus also in the FOURCC:</p>
        <video id=hls4 controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=av-opusd-mp4.m3u8>
        </video>
        <p id=err4></p>

        <p>Opus audio marked as opus in m3u and Opus in the FOURCC:</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=av-opuse-mp4.m3u8>
        </video>

        <script>
            let codes = {
                [MediaError.MEDIA_ERR_ABORTED]: 'MEDIA_ERR_ABORTED',
                [MediaError.MEDIA_ERR_NETWORK]: 'MEDIA_ERR_NETWORK',
                [MediaError.MEDIA_ERR_DECODE]: 'MEDIA_ERR_DECODE',
                [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: 'MEDIA_ERR_SRC_NOT_SUPPORTED',
            };
            function errify(hls, err) {
                hls.addEventListener('error', function() {
                    let {code, message} = this.error;
                    let codeName = codes[code];
                    err.textContent = `${code} ${codeName}: ${message}`;
                });
            }
            errify(hls1, err1);
            errify(hls2, err2);
            errify(hls3, err3);
            errify(hls4, err4);
        </script>

    </body>
</html>