<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>HLS & flat MP4 ALAC test</title> </head> <body> <h1>HLS & flat MP4 ALAC test</h1> <p>VP9/ALAC in MP4 (HLS)</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=combined-vp9-alac.m3u8> </video> <p>VP9/ALAC in MP4 (HLS, direct playlist)</p> <video controls width=640 height=360> <source type=application/vnd.apple.mpegurl src=combined-vp9-alac-mp4.m3u8> </video> <p>VP9/ALAC in MP4 (flat)</p> <video controls width=640 height=360> <source type="video/mp4; codecs="vp09.00.10.08,alac""" src=polyphon-vp9-alac.mp4> </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>