<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>HLS WebM test</title> </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> <p>This video will try to load an HLS containing VP9-in-MP4, VP8-in-MP4, and H.264:</p> <video id=hls1 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=all-mp4.m3u8> </video> <p>HLS with AAC audio and VP9, VP8, and H.264 video:</p> <video id=hls2 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-mp4.m3u8> </video> <p>HLS with AAC audio and VP9/VP8 video only:</p> <video id=hls3 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-vpx.m3u8> </video> <p>HLS with AAC audio and VP8 video only:</p> <video id=hls4 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-vp8.m3u8> </video> <p>Same, with a flat WebM fallback source:</p> <video id=hls5 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-vp8.m3u8> <source type="video/webm" src=polyphon-vp8-vorbis.webm> </video> <p>Only a flat WebM source (no codec specified):</p> <video id=flat1 controls width=640 height=360> <source type="video/webm" src=polyphon-vp8-vorbis.webm> </video> <p>Only a flat WebM source, VP8 / Vorbis:</p> <video id=flat2 controls width=640 height=360> <source type="video/webm; codecs="vp8, vorbis"" src=polyphon-vp8-vorbis.webm> </video> <p>All non-VPX MP4 formats</p> <video id=hls99 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-mpeg.m3u8> </video> <script> if (hls1.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') { if (MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"') && MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"')) { mse.textContent = 'MSE supports VP9 & AAC-LC in MP4'; mse.style.color = 'green'; } else { mse.textContent = 'MSE doesn\'t support one of VP9 or AAC in MP4'; mse.style.color = 'orange'; } } else { mse.textContent = 'MSE not supported'; mse.style.color = 'red'; } if (flat1.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 (flat2.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'; } </script> </body> </html>