<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>HLS VP9/fMP4 test</title>
        <link rel=stylesheet type=text/css href=video-js/video-js.css>
    </head>
    <body>
        <h1>HLS WebM test</h1>

        <p id=hls>Checking HLS support...</p>
        <p id=mse>Checking MSE VP9 support...</p>
        <p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
        <p id=wasm>Checking WebAssembly support...</p>

        <h2>Caminandes - Llamigos</h2>

        <p>WebM VP9 and VP8 in front, MJPEG next, HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio activated on JS.</p>
        <video id=hls1 controls width=640 height=360>
            <source type="video/webm; codecs=&quot;vp9, opus&quot;" src=new-vp9.webm>
            <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
            <source type="video/quicktime; codecs=&quot;jpeg, mp4a.6b&quot;" src=new-mjpeg.mov>
            <source type=application/vnd.apple.mpegurl src=new.m3u8>
        </video>

        <h2>Sources</h2>

        <p>Flat WebM VP9/Opus</p>
        <video controls width=640 height=360>
            <source type="video/webm; codecs=&quot;vp9, opus&quot;" src=new-vp9.webm>
        </video>

        <p>Flat WebM VP8/Vorbis</p>
        <video controls width=640 height=360>
            <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
        </video>

        <p>Flat Quicktime MJPEG/MP3</p>
        <video controls width=640 height=360>
            <source type="video/quicktime; codecs=&quot;jpeg, mp4a.6b&quot;" src=new-mjpeg.mov>
        </video>

        <p>HLS</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new.m3u8>
        </video>

        <h2>Components</h2>

        <p>HLS VP9 MP4 alone (no audio)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new-vp9.m3u8>
        </video>

        <p>HLS Opus MP4 alone (only audio)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new-opus.m3u8>
        </video>

        <p>HLS MP3 MP4 alone (only audio)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new-mp3-mp4.m3u8>
        </video>

        <p>HLS MP3 TS alone (only audio)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new-mp3-ts.m3u8>
        </video>

        <p>HLS MP3 raw alone (only audio)</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=new-mp3.m3u8>
        </video>

        <script>
            let video = document.createElement('video');
            if (video.canPlayType('application/vnd.apple.mpegurl')) {
                hls.textContent = 'native HLS playback supported';
                hls.style.color = 'green';
            } else {
                hls.textContent = 'no native HLS';
                hls.style.color = 'red';
            }
            if (typeof MediaSource == 'function') {
                let codecs = [
                    ['VP9-in-WebM', 'video/webm; codecs="vp9"'],
                    ['Opus-in-WebM', 'audio/webm; codecs="opus"'],
                    ['VP9-in-MP4', 'video/mp4; codecs="vp09.00.10.08"'],
                    ['Opus-in-MP4', 'audio/mp4; codecs="opus"'],
                    ['MP3-in-MP4', 'audio/mp4; codecs="mp4a.6b"'],
                    ['MP3', 'audio/mp3'],
                ];
                let yes = [];
                let no = [];
                for (let [name, mime] of codecs) {
                    if (MediaSource.isTypeSupported(mime)) {
                        yes.push(name);
                    } else {
                        no.push(name);
                    }
                }
                if (yes.length == codecs.length) {
                    mse.textContent = 'MSE supports ' + yes.join(', ');
                    mse.style.color = 'green';
                } else {
                    mse.textContent = 'MSE supports ' + yes.join(', ') + ' but not ' + no.join(', ');
                    mse.style.color = 'orange';
                }
            } else {
                mse.textContent = 'MSE not supported';
                mse.style.color = 'red';
            }
            if (video.canPlayType('video/webm')) {
                webm.textContent = 'flat WebM supported';
                webm.style.color = 'green';
            } else {
                webm.textContent = 'flat WebM not supported';
                webm.style.color = 'red';
            }
            if (typeof WebAssembly == 'object') {
                wasm.textContent = 'WebAssembly supported';
                wasm.style.color = 'green';
            } else {
                wasm.textContent = 'no WebAssembly support';
                wasm.style.color = 'red';
            }

            function prep(vid) {
                let hls = vid.querySelector('source[type="application/vnd.apple.mpegurl"]');
                let mjpeg = vid.querySelector('source[type="video/quicktime; codecs=\\"jpeg, mp4a.6b\\""]');
                if (hls && mjpeg && vid.canPlayType('application/vnd.apple.mpegurl')) {
                    // Move MJPEG to the end, so HLS has a chance first
                    vid.removeChild(mjpeg);
                    vid.appendChild(mjpeg);
                    // Fail over from HLS to MJPEG
                    let failover = function(event) {
                        if (this.error.code === MediaError.MEDIA_ERR_DECODE) {
                            event.preventDefault();
                            vid.removeEventListener('error', failover);
                            vid.src = mjpeg.src;
                            vid.play();
                        }
                    };
                    vid.addEventListener('error', failover);
                }
            }
            prep(hls1);
        </script>
    </body>
</html>