2023-02-16 16:15:33 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset=utf-8>
|
|
|
|
|
<title>HLS VP9/fMP4 test</title>
|
|
|
|
|
<link rel=stylesheet type=text/css href=video-js/video-js.css>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>HLS WebM test</h1>
|
|
|
|
|
|
|
|
|
|
<p id=hls>Checking HLS support...</p>
|
|
|
|
|
<p id=mse>Checking MSE VP9 support...</p>
|
|
|
|
|
<p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
|
|
|
|
|
<p id=wasm>Checking WebAssembly support...</p>
|
|
|
|
|
|
|
|
|
|
<h2>Caminandes - Llamigos</h2>
|
|
|
|
|
|
|
|
|
|
<p>WebM VP9 and VP8 in front, MJPEG next, HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio activated on JS.</p>
|
2023-02-16 19:40:59 +00:00
|
|
|
<video id=hls1 controls width=640 height=360>
|
2023-02-16 16:15:33 +00:00
|
|
|
<source type="video/webm; codecs="vp9, opus"" src=new-vp9.webm>
|
|
|
|
|
<source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm>
|
|
|
|
|
<source type="video/quicktime; codecs="jpeg, mp4a.6b"" src=new-mjpeg.mov>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<h2>Sources</h2>
|
|
|
|
|
|
|
|
|
|
<p>Flat WebM VP9/Opus</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type="video/webm; codecs="vp9, opus"" src=new-vp9.webm>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>Flat WebM VP8/Vorbis</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>Flat Quicktime MJPEG/MP3</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type="video/quicktime; codecs="jpeg, mp4a.6b"" src=new-mjpeg.mov>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>HLS</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<h2>Components</h2>
|
|
|
|
|
|
|
|
|
|
<p>HLS VP9 MP4 alone (no audio)</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new-vp9.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>HLS Opus MP4 alone (only audio)</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new-opus.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
2023-02-18 00:51:21 +00:00
|
|
|
<p>HLS MP3 MP4 alone (only audio)</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new-mp3-mp4.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>HLS MP3 TS alone (only audio)</p>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=new-mp3-ts.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<p>HLS MP3 raw alone (only audio)</p>
|
2023-02-16 16:15:33 +00:00
|
|
|
<video controls width=640 height=360>
|
2023-02-16 19:40:59 +00:00
|
|
|
<source type=application/vnd.apple.mpegurl src=new-mp3.m3u8>
|
2023-02-16 16:15:33 +00:00
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let video = document.createElement('video');
|
|
|
|
|
if (video.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') {
|
|
|
|
|
let codecs = [
|
|
|
|
|
['VP9-in-WebM', 'video/webm; codecs="vp9"'],
|
|
|
|
|
['Opus-in-WebM', 'audio/webm; codecs="opus"'],
|
|
|
|
|
['VP9-in-MP4', 'video/mp4; codecs="vp09.00.10.08"'],
|
|
|
|
|
['Opus-in-MP4', 'audio/mp4; codecs="opus"'],
|
2023-02-18 00:51:21 +00:00
|
|
|
['MP3-in-MP4', 'audio/mp4; codecs="mp4a.6b"'],
|
2023-02-16 16:15:33 +00:00
|
|
|
['MP3', 'audio/mp3'],
|
|
|
|
|
];
|
|
|
|
|
let yes = [];
|
|
|
|
|
let no = [];
|
|
|
|
|
for (let [name, mime] of codecs) {
|
|
|
|
|
if (MediaSource.isTypeSupported(mime)) {
|
|
|
|
|
yes.push(name);
|
|
|
|
|
} else {
|
|
|
|
|
no.push(name);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (yes.length == codecs.length) {
|
|
|
|
|
mse.textContent = 'MSE supports ' + yes.join(', ');
|
|
|
|
|
mse.style.color = 'green';
|
|
|
|
|
} else {
|
|
|
|
|
mse.textContent = 'MSE supports ' + yes.join(', ') + ' but not ' + no.join(', ');
|
|
|
|
|
mse.style.color = 'orange';
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
mse.textContent = 'MSE not supported';
|
|
|
|
|
mse.style.color = 'red';
|
|
|
|
|
}
|
|
|
|
|
if (video.canPlayType('video/webm')) {
|
|
|
|
|
webm.textContent = 'flat WebM supported';
|
|
|
|
|
webm.style.color = 'green';
|
|
|
|
|
} else {
|
|
|
|
|
webm.textContent = 'flat WebM not supported';
|
|
|
|
|
webm.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';
|
|
|
|
|
}
|
2023-02-16 19:40:59 +00:00
|
|
|
|
|
|
|
|
function prep(vid) {
|
|
|
|
|
let hls = vid.querySelector('source[type="application/vnd.apple.mpegurl"]');
|
|
|
|
|
let mjpeg = vid.querySelector('source[type="video/quicktime; codecs=\\"jpeg, mp4a.6b\\""]');
|
|
|
|
|
if (hls && mjpeg && vid.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
|
|
// Move MJPEG to the end, so HLS has a chance first
|
|
|
|
|
vid.removeChild(mjpeg);
|
|
|
|
|
vid.appendChild(mjpeg);
|
|
|
|
|
// Fail over from HLS to MJPEG
|
|
|
|
|
let failover = function(event) {
|
|
|
|
|
if (this.error.code === MediaError.MEDIA_ERR_DECODE) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
vid.removeEventListener('error', failover);
|
|
|
|
|
vid.src = mjpeg.src;
|
|
|
|
|
vid.play();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
vid.addEventListener('error', failover);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
prep(hls1);
|
2023-02-16 16:15:33 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2023-02-13 22:05:37 +00:00
|
|
|
</html>
|
