This commit is contained in:
Brooke Vibber 2023-02-16 11:40:59 -08:00
commit 74dbc1419f
4 changed files with 37 additions and 34 deletions

View file

@ -16,7 +16,7 @@
<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>
<video controls width=640 height=360>
<video id=hls1 controls width=640 height=360>
<source type="video/webm; codecs=&quot;vp9, opus&quot;" src=new-vp9.webm>
<source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
<source type="video/quicktime; codecs=&quot;jpeg, mp4a.6b&quot;" src=new-mjpeg.mov>
@ -52,34 +52,14 @@
<source type=application/vnd.apple.mpegurl src=new-vp9.m3u8>
</video>
<p>HLS MJPEG MP4 alone (no audio)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-jpeg.m3u8>
</video>
<p>HLS MJPEG TS alone (no audio)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-jpeg-ts.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>
<p>HLS MP3 MP4 alone (only audio)</p>
<p>HLS MP3 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>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-mp3-raw.m3u8>
<source type=application/vnd.apple.mpegurl src=new-mp3.m3u8>
</video>
<script>
@ -133,6 +113,27 @@
wasm.textContent = 'no WebAssembly support';
wasm.style.color = 'red';
}
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);
</script>
</body>
</html>