<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>HLS & flat MP4 ALAC test</title>
    </head>
    <body>
        <h1>HLS & flat MP4 ALAC test</h1>

        <p>VP9/ALAC in MP4 (HLS)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=combined-vp9-alac.m3u8>
        </video>

        <p>VP9/ALAC in MP4 (HLS, direct playlist)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=combined-vp9-alac-mp4.m3u8>
        </video>

        <p>VP9/ALAC in MP4 (flat)</p>
        <video controls width=640 height=360>
            <source type="video/mp4; codecs=&quot;vp09.00.10.08,alac&quot;"" src=polyphon-vp9-alac.mp4>
        </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}`;
                });
            }
            for (let hls of document.querySelectorAll('video')) {
                let err = document.createElement('p');
                if (hls.nextSibling) {
                    hls.parentNode.insertBefore(err, hls.nextSibling);
                } else {
                    hls.parentNode.appendChild(err);
                }
                errify(hls, err);
            }
        </script>

    </body>
</html>