101 lines
4 KiB
HTML
101 lines
4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<title>HLS WebM test</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>HLS WebM test</h1>
|
||
|
|
|
||
|
|
<p id=hls>Checking HLS support...</p>
|
||
|
|
<p id=mse>Checking MSE support...</p>
|
||
|
|
<p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
|
||
|
|
<p id=webm2>Checking flat WebM generic support...</p>
|
||
|
|
<p id=wasm>Checking WebAssembly support...</p>
|
||
|
|
|
||
|
|
<p>This video will try to load an HLS containing VP9-in-MP4, VP8-in-MP4, and H.264:</p>
|
||
|
|
<video id=hls1 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=all-mp4.m3u8>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with AAC audio and VP9, VP8, and H.264 video:</p>
|
||
|
|
<video id=hls2 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=av-aac-mp4.m3u8>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with AAC audio and VP9/VP8 video only:</p>
|
||
|
|
<video id=hls3 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=av-aac-vpx.m3u8>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with AAC audio and VP8 video only:</p>
|
||
|
|
<video id=hls4 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=av-aac-vp8.m3u8>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>Same, with a flat WebM fallback source:</p>
|
||
|
|
<video id=hls5 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=av-aac-vp8.m3u8>
|
||
|
|
<source type="video/webm" src=polyphon-vp8-vorbis.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>Only a flat WebM source (no codec specified):</p>
|
||
|
|
<video id=flat1 controls width=640 height=360>
|
||
|
|
<source type="video/webm" src=polyphon-vp8-vorbis.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>Only a flat WebM source, VP8 / Vorbis:</p>
|
||
|
|
<video id=flat2 controls width=640 height=360>
|
||
|
|
<source type="video/webm; codecs="vp8, vorbis"" src=polyphon-vp8-vorbis.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>All non-VPX MP4 formats</p>
|
||
|
|
<video id=hls99 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=av-aac-mpeg.m3u8>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
if (hls1.canPlayType('application/vnd.apple.mpegurl')) {
|
||
|
|
hls.textContent = 'native HLS playback supported';
|
||
|
|
hls.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
hls.textContent = 'no native HLS';
|
||
|
|
hls.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (typeof MediaSource == 'function') {
|
||
|
|
if (MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"') &&
|
||
|
|
MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"')) {
|
||
|
|
mse.textContent = 'MSE supports VP9 & AAC-LC in MP4';
|
||
|
|
mse.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
mse.textContent = 'MSE doesn\'t support one of VP9 or AAC in MP4';
|
||
|
|
mse.style.color = 'orange';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
mse.textContent = 'MSE not supported';
|
||
|
|
mse.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (flat1.canPlayType('video/webm')) {
|
||
|
|
webm.textContent = 'flat WebM generic supported';
|
||
|
|
webm.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
webm.textContent = 'flat WebM generic not supported';
|
||
|
|
webm.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (flat2.canPlayType('video/webm; codecs="vp8, vorbis"')) {
|
||
|
|
webm2.textContent = 'flat WebM VP8/Vorbis supported';
|
||
|
|
webm2.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
webm2.textContent = 'flat WebM VP8/Vorbis not supported';
|
||
|
|
webm2.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (typeof WebAssembly == 'object') {
|
||
|
|
wasm.textContent = 'WebAssembly supported';
|
||
|
|
wasm.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
wasm.textContent = 'no WebAssembly support';
|
||
|
|
wasm.style.color = 'red';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|