<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>HLS WebM test with codec</title> </head> <body> <h1>HLS WebM test with codec</h1> <p>The video will try to load an HLS containing a VP9-in-MP4 variant, with AAC audio, with no fallback:</p> <video id=hls1 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-vp9.m3u8> </video> <p id=err></p> <script> let codes = { [MediaError.MEDIA_ERR_ABORTED]: 'MEDIA_ERR_ABORTED', [MediaError.MEDIA_ERR_NETWORK]: 'MEDIA_ERR_NETWORK', [MediaError.MEDIA_ERR_DECODE]: 'MEDIA_ERR_DECODE', [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: 'MEDIA_ERR_SRC_NOT_SUPPORTED', }; hls1.addEventListener('error', function() { let {code, message} = this.error; let codeName = codes[code]; err.textContent = `${code} ${codeName}: ${message}`; }); </script> <p>Similar with VP8 + AAC</p> <video id=hls1b controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-aac-vp8.m3u8> </video> <p>H.263 in MP4</p> <video id=hls2 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-only-h263-mp4.m3u8> </video> <p>H.263 in mov</p> <video id=hls3 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-only-h263-mov.m3u8> </video> <p>H.263 in 3gp</p> <video id=hls4 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-only-h263-3gp.m3u8> </video> <p>Similar with JPEG</p> <video id=hls5 controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=only-jpeg.m3u8> </video> </body> </html>