<!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>