54 lines
2 KiB
HTML
54 lines
2 KiB
HTML
|
<!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>
|