hls-test/mp3.html

70 lines
2.7 KiB
HTML
Raw Normal View History

2021-10-22 18:27:02 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HLS WebM test with codec</title>
</head>
<body>
2022-06-26 21:17:53 +00:00
<h1>HLS tests with MP3 audio</h1>
2022-06-06 22:33:52 +00:00
<p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with MP3 audio:</p>
2022-06-26 21:17:53 +00:00
<video controls width=640 height=360>
2021-10-22 18:27:02 +00:00
<source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8>
</video>
2022-06-06 22:33:52 +00:00
<p>And with MP3 audio and only H.264 (marked as mp4a.40.34):</p>
2022-06-26 21:17:53 +00:00
<video controls width=640 height=360>
2022-06-06 22:33:52 +00:00
<source type=application/vnd.apple.mpegurl src=av-mp3-h264.m3u8>
</video>
2022-06-26 21:17:53 +00:00
<p>And with MP3-in-MP4 audio (marked as mp4a.6b):</p>
<video controls width=640 height=360>
2022-06-06 22:33:52 +00:00
<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>
2022-06-26 21:17:53 +00:00
<video controls width=640 height=360>
2022-06-06 22:33:52 +00:00
<source type=application/vnd.apple.mpegurl src=av-mp3mp4b-h264.m3u8>
</video>
2022-06-26 21:17:53 +00:00
<p>And with MP3-in-TS audio (marked as mp4a.40.34):</p>
<video controls width=640 height=360>
2022-06-06 22:33:52 +00:00
<source type=application/vnd.apple.mpegurl src=av-ts-h264.m3u8>
</video>
2022-06-26 21:17:53 +00:00
<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>
2022-06-06 22:33:52 +00:00
2021-10-22 18:27:02 +00:00
<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',
};
2022-06-06 22:33:52 +00:00
function errify(hls, err) {
hls.addEventListener('error', function() {
let {code, message} = this.error;
let codeName = codes[code];
err.textContent = `${code} ${codeName}: ${message}`;
});
}
2022-06-26 21:17:53 +00:00
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>
2021-10-22 18:27:02 +00:00
</body>
</html>