<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>HLS WebM 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 support...</p>
        <p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
        <p id=webm2>Checking flat WebM generic support...</p>
        <p id=wasm>Checking WebAssembly support...</p>

        <h2>Caminandes - Llamigos</h2>

        <h3>VP9</h3>

        <!--
        <p>HLS with AAC-in-MP4 audio and VP9-in-MP4 at several resolutions:</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-aac.m3u8>
        </video>

        <p>HLS with Opus-in-MP4 audio and VP9-in-MP4 at several resolutions:</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus.m3u8>
        </video>
        -->

        <h3>Mixed codecs</h3>

        <p>HLS with ((VP9-fMP4 + (Opus-fMP4 | MP3)) | (MJPEG-QuickTime + MP3)):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus-mp3-mjpeg.m3u8>
        </video>

        <h3>VP9 only</h3>

        <p>HLS with (VP9-fMP4 + (Opus-fMP4 | MP3)):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-opus.m3u8>
        </video>

        <h3>MJPEG only</h3>

        <p>HLS standalone (MJPEG-MP3-MP4):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mp3.m3u8>
        </video>
        <p>HLS standalone (MJPEG-AAC-MP4):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg-aac.m3u8>
        </video>
        <p>HLS standalone (MJPEG-noaudio-MP4):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg.m3u8>
        </video>

        <p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mp3-mov.m3u8>
        </video>
        <p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg-aac-mov.m3u8>
        </video>
        <p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
        <video controls width=640 height=360>
            <source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mov.m3u8>
        </video>

        <p>Flat QT with (MJPEG-MP3-QuickTime):</p>
        <video controls width=640 height=360>
            <source type="video/quicktime" src=standalone-mjpeg-mp3.mov>
        </video>
        <p>Flat QT with (MJPEG-AAC-QuickTime):</p>
        <video controls width=640 height=360>
            <source type="video/quicktime" src=standalone-mjpeg-aac.mov>
        </video>
        <p>Flat QT with (MJPEG-noaudio-QuickTime):</p>
        <video controls width=640 height=360>
            <source type="video/quicktime" src=standalone-mjpeg.mov>
        </video>

        <!--
        <script src=video-js/alt/video.core.js></script>
        <script src=videojs-http-streaming.js></script>
        -->
        <script src="node_modules/video.js/dist/video.js"></script>
        <!--
        <script src="node_modules/video.js/dist/alt/video.core.js"></script>
        <script src="http-streaming/dist/videojs-http-streaming.js"></script>
        -->

        <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 video = [];
                let audio = [];
                if (MediaSource.isTypeSupported('video/webm; codecs="vp8"')) {
                    video.push('VP8-in-WebM (vp8)');
                }
                if (MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
                    video.push('VP9-in-WebM (vp9)');
                }
                if (MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"')) {
                    video.push('VP9-in-MP4 (vp09)');
                }
                if (MediaSource.isTypeSupported('video/mp4; codecs="vp9"')) {
                    video.push('VP9-in-MP4 (vp9)');
                }
                if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"')) {
                    audio.push('AAC-in-MP4');
                }
                if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.34"')) {
                    audio.push('MP3-in-MP4 (mp4a.40.34)');
                }
                if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.6b"')) {
                    audio.push('MP3-in-MP4 (mp4a.6b)');
                }
                if (MediaSource.isTypeSupported('audio/mp4; codecs="mp3"')) {
                    audio.push('MP3-in-MP4 (mp3)');
                }
                if (MediaSource.isTypeSupported('audio/mp4; codecs="opus"')) {
                    audio.push('Opus-in-MP4');
                }
                if (MediaSource.isTypeSupported('audio/webm; codecs="opus"')) {
                    audio.push('Opus-in-WebM');
                }
                if (MediaSource.isTypeSupported('audio/webm; codecs="vorbis"')) {
                    audio.push('Vorbis-in-WebM');
                }
                if (MediaSource.isTypeSupported('audio/mp3')) {
                    audio.push('MP3 raw');
                }

                if (video.length > 0 && audio.length > 0) {
                    mse.style.color = 'green';
                } else {
                    mse.style.color = 'orange';
                }
                mse.textContent = `MSE supports video: ${video.join(', ')}; audio: ${audio.join(',')}`;
            } else {
                mse.textContent = 'MSE not supported';
                mse.style.color = 'red';
            }
            if (video.canPlayType('video/webm')) {
                webm.textContent = 'flat WebM generic supported';
                webm.style.color = 'green';
            } else {
                webm.textContent = 'flat WebM generic not supported';
                webm.style.color = 'red';
            }
            if (video.canPlayType('video/webm; codecs="vp8, vorbis"')) {
                webm2.textContent = 'flat WebM VP8/Vorbis supported';
                webm2.style.color = 'green';
            } else {
                webm2.textContent = 'flat WebM VP8/Vorbis not supported';
                webm2.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';
            }

            var playerConfig = {
                    responsive: true,
                    controlBar: {
                            volumePanel: {
                                    vertical: true,
                                    inline: false
                            }
                    },
                    techOrder: [ 'html5' ],
                    html5: {}
            };
            videojs.log.level('debug');
            
            if (window.MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="vp09,opus"')) {
                for (let video of document.querySelectorAll('video')) {
                    video.classList.add('video-js');
                    video.classList.add('vjs-default-skin');
                    videojs(video, playerConfig);
                }
            }
        </script>
    </body>
</html>