<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>HLS WebM test with codec</title> </head> <body> <h1>HLS tests with MP3 audio</h1> <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with MP3 audio:</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8> </video> <p>And with MP3 audio and only H.264 (marked as mp4a.40.34):</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-mp3-h264.m3u8> </video> <p>And with MP3-in-MP4 audio (marked as mp4a.6b):</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-mp3mp4-h264.m3u8> </video> <p>And with MP3-in-MP4 audio (marked as mp4a.40.34):</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-mp3mp4b-h264.m3u8> </video> <p>And with MP3-in-TS audio (marked as mp4a.40.34):</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=av-ts-h264.m3u8> </video> <p>Now VP9 plus MP3 combined in MP4 (marked as mp4a.6b)</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=combined-vp9-mp3.m3u8> </video> <p>Now VP9 plus MP3 combined in MP4 (direct playlist)</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=combined-vp9-mp3-mp4.m3u8> </video> <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', }; function errify(hls, err) { hls.addEventListener('error', function() { let {code, message} = this.error; let codeName = codes[code]; err.textContent = `${code} ${codeName}: ${message}`; }); } for (let hls of document.querySelectorAll('video')) { let err = document.createElement('p'); if (hls.nextSibling) { hls.parentNode.insertBefore(err, hls.nextSibling); } else { hls.parentNode.appendChild(err); } errify(hls, err); } </script> </body> </html>