brooke/hls-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
Brooke Vibber 2023-03-29 10:59:47 -07:00
commit 15b30ffae7
4 changed files with 156 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

130
fmp4.html
View file

@ -12,103 +12,43 @@
<h3>Full fallbacks</h3>
<p>WebM VP9 and VP8 in front, HLS with VP9/MJPEG video and Opus/MP3 audio behind.</p>
<video 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=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
</video>
<p>HLS with VP9/MJPEG video tracks and Opus/MP3 audio tracks.</p>
<div>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
</video>
</div>
<h3>Single video codecs</h3>
<p></p><a href="fmp4-tracks.html">see full fmp4 track variants list</p>
<p>HLS VP9 + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9.m3u8>
</video>
<p>HLS Motion-JPEG.mov + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.mjpeg.mov.m3u8>
</video>
<p>HLS H.263.3gp + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.h263.3gp.m3u8>
</video>
<p>HLS MPEG-4 Visual + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.mpeg4.m3u8>
</video>
<p>HLS H.264 + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.h264.m3u8>
</video>
<h3>VP9 + Single fallback</h3>
<p>HLS VP9/MJPEG.mov with Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
</video>
<p>HLS VP9/H.263.3gp with Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-h263.3gp.m3u8>
</video>
<p>HLS VP9/MPEG-4 Visual with Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mpeg4.m3u8>
</video>
<p>HLS VP9/H.264 with Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-h264.m3u8>
</video>
<h2>Component tracks</h2>
<p>HLS VP9 in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.480p.vp9.mp4.m3u8>
</video>
<p>HLS MJPEG.mov in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.120p.mjpeg.mov.m3u8>
</video>
<p>HLS h.263.3gp in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.288p.h263.3gp.m3u8>
</video>
<p>HLS MPEG-4 Visual in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.480p.mpeg4.mp4.m3u8>
</video>
<p>HLS h.264 in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.480p.h264.mp4.m3u8>
</video>
<p>HLS Opus in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.opus.mp4.m3u8>
</video>
<p>HLS AAC in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.aac.mp4.m3u8>
</video>
<p>HLS MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.mpeg.mp3.m3u8>
</video>
<script src="node_modules/video.js/dist/video.js"></script>
<script type="text/javascript">
let playerConfig = {
responsive: true,
controlBar: {
volumePanel: {
vertical: true,
inline: false
}
},
techOrder: [ 'html5' ],
html5: {}
};
videojs.log.level('debug');
console.log('hey');
console.log(MediaSource);
console.log(MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"'));
if (window.MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"')) {
console.log('yeah');
for (let video of document.querySelectorAll('video')) {
console.log(video);
video.classList.add('video-js');
video.classList.add('vjs-default-skin');
videojs(video, playerConfig);
}
}
</script>
</body>
</html>