<!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="vp9, opus"" src=new-vp9.webm> <source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm> <source type="video/quicktime; codecs="jpeg, mp4a.6b"" 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="vp9, opus"" src=new-vp9.webm> </video> <p>Flat WebM VP8/Vorbis</p> <video controls width=640 height=360> <source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm> </video> <p>Flat Quicktime MJPEG/MP3</p> <video controls width=640 height=360> <source type="video/quicktime; codecs="jpeg, mp4a.6b"" 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>