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
parent 1589f0a531
commit 15b30ffae7
4 changed files with 156 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
fmp4-tracks.html Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HLS VP9/fMP4 tracks test</title>
<link rel=stylesheet type=text/css href=video-js/video-js.css>
</head>
<body>
<h1>HLS VP9/fMP4 tracks test</h1>
<h2>Caminandes - Llamigos</h2>
<p><a href="fmp4.html">back to main fmp4 entryy</a></p>
<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>
<h3>Single video codecs</h3>
<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.mov + Opus/MP3:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.h263.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>
<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.mov in fMP4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.288p.h263.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>
</body>
</html>

122
fmp4.html
View file

@ -12,103 +12,43 @@
<h3>Full fallbacks</h3> <h3>Full fallbacks</h3>
<p>WebM VP9 and VP8 in front, HLS with VP9/MJPEG video and Opus/MP3 audio behind.</p> <p>HLS with VP9/MJPEG video tracks and Opus/MP3 audio tracks.</p>
<video controls width=640 height=360> <div>
<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>
<h3>Single video codecs</h3>
<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> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8> <source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
</video> </video>
</div>
<p>HLS VP9/H.263.3gp with Opus/MP3:</p> <p></p><a href="fmp4-tracks.html">see full fmp4 track variants list</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> <script src="node_modules/video.js/dist/video.js"></script>
<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> <script type="text/javascript">
<video controls width=640 height=360> let playerConfig = {
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-h264.m3u8> responsive: true,
</video> controlBar: {
volumePanel: {
<h2>Component tracks</h2> vertical: true,
inline: false
<p>HLS VP9 in fMP4:</p> }
<video controls width=640 height=360> },
<source type=application/vnd.apple.mpegurl src=fmp4.480p.vp9.mp4.m3u8> techOrder: [ 'html5' ],
</video> html5: {}
};
<p>HLS MJPEG.mov in fMP4:</p> videojs.log.level('debug');
<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>
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> </body>
</html> </html>

8
make-fmp4.sh
View file

@ -42,8 +42,10 @@ set -e
#ffmpeg -i $INFILE -an $VIDEO_H263 $MOVFLAGS -y fmp4.288p.h263.3gp #ffmpeg -i $INFILE -an $VIDEO_H263 $MOVFLAGS -y fmp4.288p.h263.3gp
#ffmpeg -i $INFILE -an $VIDEO_H263 $MOVFLAGS -y fmp4.288p.h263.mov #ffmpeg -i $INFILE -an $VIDEO_H263 $MOVFLAGS -y fmp4.288p.h263.mov
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $MOVFLAGS -y fmp4.120p.mjpeg.mp4 # Note use duration, not keyframe interval, for fragments,
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $MOVFLAGS -y fmp4.120p.mjpeg.mov # because all are keyframes!
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mp4
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mov
# Playlist processing # Playlist processing
php extract-playlist.php fmp4.audio.mpeg.mp3 > fmp4.audio.mpeg.mp3.m3u8 php extract-playlist.php fmp4.audio.mpeg.mp3 > fmp4.audio.mpeg.mp3.m3u8
@ -60,11 +62,13 @@ php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 > fmp4.v
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.h264.mp4 > fmp4.h264.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.h264.mp4 > fmp4.h264.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.mpeg4.mp4 > fmp4.mpeg4.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.mpeg4.mp4 > fmp4.mpeg4.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 288p.h263.3gp > fmp4.h263.3gp.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 288p.h263.3gp > fmp4.h263.3gp.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 288p.h263.mov > fmp4.h263.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 120p.mjpeg.mp4 > fmp4.mjpeg.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 120p.mjpeg.mp4 > fmp4.mjpeg.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 120p.mjpeg.mov > fmp4.mjpeg.mov.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 120p.mjpeg.mov > fmp4.mjpeg.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 480p.h264.mp4 > fmp4.vp9-h264.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 480p.h264.mp4 > fmp4.vp9-h264.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 480p.mpeg4.mp4 > fmp4.vp9-mpeg4.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 480p.mpeg4.mp4 > fmp4.vp9-mpeg4.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 288p.h263.3gp > fmp4.vp9-h263.3gp.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 288p.h263.3gp > fmp4.vp9-h263.3gp.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 288p.h263.mov > fmp4.vp9-h263.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 120p.mjpeg.mp4 > fmp4.vp9-mjpeg.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 120p.mjpeg.mp4 > fmp4.vp9-mjpeg.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 120p.mjpeg.mov > fmp4.vp9-mjpeg.mov.m3u8 php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 120p.mjpeg.mov > fmp4.vp9-mjpeg.mov.m3u8

20
meta-playlist.php
View file

@ -24,21 +24,19 @@ $videoCodecs = [
// 'mpeg4' => 'avc1', // lies // 'mpeg4' => 'avc1', // lies
// 'h263' => 'avc1', // lies // 'h263' => 'avc1', // lies
'mjpeg' => 'jpeg', // works on mov, not mp4 // truths
/*
'mjpeg' => 'jpeg', // works on current mac & ios 13, but not ios 10
'h263' => 's263',
'mpeg4' => 'mp4v',
*/
// These lies work on iOS too // These lies work on iOS 10 and iOS 13+ too
'mjpeg' => 'avc1.42e00a', // lies
'h263' => 'avc1.42e00a', // lies 'h263' => 'avc1.42e00a', // lies
'mpeg4' => 'avc1.42e00a', // lies 'mpeg4' => 'avc1.42e00a', // lies
//'mpeg4' => 'mp4v', // ???
//'h263' => 'h263', // ???
/*
'h264' => 'mp4v',
'h263' => 'mp4v',
'mjpeg' => 'mp4v',
'mpeg4' => 'mp4v',
*/
// none of them seem to work on iOS 12!
]; ];