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 16:08:31 -07:00
parent 15b30ffae7
commit e508fb2d05
6 changed files with 104 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extract-playlist.php
View file

@ -773,7 +773,9 @@ if ( $ext === '.mp3' ) {
} else { } else {
die( "Unexpected file extension $ext\n" ); die( "Unexpected file extension $ext\n" );
} }
if ( $ext === '.mp3' ) {
$segments = consolidate( $target, $segments ); $segments = consolidate( $target, $segments );
}
/* /*
foreach ( $segments as $key => $segment ) { foreach ( $segments as $key => $segment ) {

61
fmp4-tracks.html
View file

@ -10,49 +10,7 @@
<h2>Caminandes - Llamigos</h2> <h2>Caminandes - Llamigos</h2>
<p><a href="fmp4.html">back to main fmp4 entryy</a></p> <p><a href="fmp4.html">back to main fmp4 entry</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> <h2>Component tracks</h2>
<p>HLS VP9 in fMP4:</p> <p>HLS VP9 in fMP4:</p>
@ -65,11 +23,6 @@
<source type=application/vnd.apple.mpegurl src=fmp4.120p.mjpeg.mov.m3u8> <source type=application/vnd.apple.mpegurl src=fmp4.120p.mjpeg.mov.m3u8>
</video> </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> <p>HLS h.263.3gp in fMP4:</p>
<video controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.288p.h263.3gp.m3u8> <source type=application/vnd.apple.mpegurl src=fmp4.288p.h263.3gp.m3u8>
@ -95,10 +48,20 @@
<source type=application/vnd.apple.mpegurl src=fmp4.audio.aac.mp4.m3u8> <source type=application/vnd.apple.mpegurl src=fmp4.audio.aac.mp4.m3u8>
</video> </video>
<p>HLS MP3:</p> <p>HLS MP3 raw:</p>
<video controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.mpeg.mp3.m3u8> <source type=application/vnd.apple.mpegurl src=fmp4.audio.mpeg.mp3.m3u8>
</video> </video>
<p>HLS MP3 QuickTime .mov:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.mpeg.mov.m3u8>
</video>
<p>HLS MP3 .mp4:</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.audio.mpeg.mp4.m3u8>
</video>
</body> </body>
</html> </html>

59
fmp4.html
View file

@ -10,16 +10,42 @@
<h2>Caminandes - Llamigos</h2> <h2>Caminandes - Llamigos</h2>
<h3>Full fallbacks</h3> <ul>
<li><a href="fmp4-codecs.html">see codec variants</a></li>
<li><a href="fmp4-tracks.html">see component track list</a></li>
</ul>
<p>HLS with VP9/MJPEG video tracks and Opus/MP3 audio tracks.</p> <h3>With fallbacks</h3>
<p>HLS with VP9/MJPEG video tracks and Opus/MP3 audio tracks. Video.js enabled to provide HLS-over-MSE for Chrome/Firefox.</p>
<div> <div>
<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> </div>
<p></p><a href="fmp4-tracks.html">see full fmp4 track variants list</p> <p>Current behavior:</p>
<ul>
<li>MSE-based streaming with VHS
<ul>
<li>Firefox seems to work with VP9 & Opus tracks via video.js</li>
<li>Chrome seems unhappy, something in the MSE is not ok with the VP9 first segment?</li>
<li>(disabled) Safari uses the MP3 audio tracks and VHS gets confused because it tries to parse them as MP4 (not Safari's fault)</li>
</ul>
</li>
<li>Apple HLS player
<ul>
<li>Safari 16 on macOS 13 plays MJPEG and MP3 audio</li>
<li>iOS 16 plays VP9 or MJPEG if no hardware codec, and MP3 audio</li>
<li>Those last two will also play h.263 or MPEG-4 visual IF labeled as false "avc1"; MJPEG can be properly labeled as "jpeg".</li>
<li><i>no access to iOS 13-15</i></li>
<li>iOS 12 doesn't seem to like any version on an old iPad Air, except the h264+MP3</li>
<li><i>no access to iOS 11</i></li>
<li>iOS 10 on iPhone 5C plays jpeg, h.263, or mpeg-4 visual IF labeled as false avc1.blah.</li>
<li>iOS 9 doesn't understand the required version of HLS playlist format, and fails.</li>
</ul>
</li>
</ul>
<script src="node_modules/video.js/dist/video.js"></script> <script src="node_modules/video.js/dist/video.js"></script>
@ -32,22 +58,33 @@
inline: false inline: false
} }
}, },
techOrder: [ 'html5' ], html5: {
html5: {} vhs: {
// Currently the MP3 audio track fails in Safari
// and it doesn't grok the Opus
// Either fix MP3 handling in vhs or use AAC.
// Switching to fragmented QuickTime ;)
// seems to be helping maybe?
overrideNative: false
}
},
}; };
videojs.log.level('debug'); videojs.log.level('debug');
console.log('hey'); console.log(typeof MediaSource)
console.log(MediaSource); if (typeof MediaSource !== 'undefined') {
console.log(MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"')); //let vp9 = MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08"');
if (window.MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"')) { //let opus = MediaSource.isTypeSupported('video/mp4; codecs="opus"');
console.log('yeah'); //let mp3 = MediaSource.isTypeSupported('audio/mpeg');
//if (vp9 && (opus || mp3)) {
for (let video of document.querySelectorAll('video')) { for (let video of document.querySelectorAll('video')) {
console.log(video);
video.classList.add('video-js'); video.classList.add('video-js');
video.classList.add('vjs-default-skin'); video.classList.add('vjs-default-skin');
videojs(video, playerConfig); videojs(video, playerConfig);
} }
// }
} }
</script> </script>
</body> </body>

40
make-fmp4.sh
View file

@ -7,7 +7,7 @@ BITRATE_LO="-b:v 1000k"
SIZE_MAIN="-s 854x480" SIZE_MAIN="-s 854x480"
SIZE_H263="-s 352x288" SIZE_H263="-s 352x288"
SIZE_SMALL="-s 212x120" SIZE_SMALL="-s 256x144"
VIDEO_H264="-vcodec h264 -g 240 $BITRATE_HI $SIZE_MAIN" VIDEO_H264="-vcodec h264 -g 240 $BITRATE_HI $SIZE_MAIN"
VIDEO_MPEG4="-vcodec mpeg4 -g 240 $BITRATE_HI $SIZE_MAIN" VIDEO_MPEG4="-vcodec mpeg4 -g 240 $BITRATE_HI $SIZE_MAIN"
@ -16,8 +16,8 @@ VIDEO_MJPEG="-vcodec mjpeg $BITRATE_HI $SIZE_SMALL"
VIDEO_VP9="-vcodec libvpx-vp9 -tile-columns 2 -row-mt 1 -cpu-used 3 -g 240 $BITRATE_LO $SIZE_MAIN" VIDEO_VP9="-vcodec libvpx-vp9 -tile-columns 2 -row-mt 1 -cpu-used 3 -g 240 $BITRATE_LO $SIZE_MAIN"
AUDIO_OPUS="-acodec libopus -ac 2 -ar 48000 -ab 96k" AUDIO_OPUS="-acodec libopus -ac 2 -ar 48000 -ab 96k"
AUDIO_AAC="-ac 2 -ar 44100 -ab 128k" AUDIO_AAC="-ac 2 -ar 48000 -ab 128k"
AUDIO_MP3="-acodec libmp3lame -ac 2 -ar 44100 -ab 128k" AUDIO_MP3="-acodec libmp3lame -ac 2 -ar 48000 -ab 128k"
INFILE=caminandes-llamigos.webm INFILE=caminandes-llamigos.webm
@ -25,6 +25,8 @@ set -e
# Audio for HLS # Audio for HLS
#ffmpeg -i $INFILE -vn $AUDIO_MP3 -y fmp4.audio.mpeg.mp3 #ffmpeg -i $INFILE -vn $AUDIO_MP3 -y fmp4.audio.mpeg.mp3
#ffmpeg -i $INFILE -vn $AUDIO_MP3 $AUDFLAGS -y fmp4.audio.mpeg.mp4
#ffmpeg -i $INFILE -vn $AUDIO_MP3 $AUDFLAGS -y fmp4.audio.mpeg.mov
#ffmpeg -i $INFILE -vn $AUDIO_AAC $AUDFLAGS -y fmp4.audio.aac.mp4 #ffmpeg -i $INFILE -vn $AUDIO_AAC $AUDFLAGS -y fmp4.audio.aac.mp4
#ffmpeg -i $INFILE -vn $AUDIO_OPUS $AUDFLAGS -y fmp4.audio.opus.mp4 #ffmpeg -i $INFILE -vn $AUDIO_OPUS $AUDFLAGS -y fmp4.audio.opus.mp4
@ -49,6 +51,8 @@ set -e
# 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
php extract-playlist.php fmp4.audio.mpeg.mp4 > fmp4.audio.mpeg.mp4.m3u8
php extract-playlist.php fmp4.audio.mpeg.mov > fmp4.audio.mpeg.mov.m3u8
php extract-playlist.php fmp4.audio.aac.mp4 > fmp4.audio.aac.mp4.m3u8 php extract-playlist.php fmp4.audio.aac.mp4 > fmp4.audio.aac.mp4.m3u8
php extract-playlist.php fmp4.audio.opus.mp4 > fmp4.audio.opus.mp4.m3u8 php extract-playlist.php fmp4.audio.opus.mp4 > fmp4.audio.opus.mp4.m3u8
php extract-playlist.php fmp4.480p.vp9.mp4 > fmp4.480p.vp9.mp4.m3u8 php extract-playlist.php fmp4.480p.vp9.mp4 > fmp4.480p.vp9.mp4.m3u8
@ -58,17 +62,21 @@ php extract-playlist.php fmp4.288p.h263.3gp > fmp4.288p.h263.3gp.m3u8
php extract-playlist.php fmp4.120p.mjpeg.mp4 > fmp4.120p.mjpeg.mp4.m3u8 php extract-playlist.php fmp4.120p.mjpeg.mp4 > fmp4.120p.mjpeg.mp4.m3u8
php extract-playlist.php fmp4.120p.mjpeg.mov > fmp4.120p.mjpeg.mov.m3u8 php extract-playlist.php fmp4.120p.mjpeg.mov > fmp4.120p.mjpeg.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.vp9.mp4 > fmp4.vp9.m3u8 MPEG_TRACK=audio.mpeg.mp3
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.h264.mp4 > fmp4.h264.m3u8 #MPEG_TRACK=audio.mpeg.mov
php meta-playlist.php fmp4 audio.opus.mp4 audio.mpeg.mp3 480p.mpeg4.mp4 > fmp4.mpeg4.m3u8 #MPEG_TRACK=audio.mpeg.mp4
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.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 $MPEG_TRACK 480p.vp9.mp4 > fmp4.vp9.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 $MPEG_TRACK 480p.h264.mp4 > fmp4.h264.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 $MPEG_TRACK 480p.mpeg4.mp4 > fmp4.mpeg4.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 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.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 $MPEG_TRACK 288p.h263.mov > fmp4.h263.mov.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 $MPEG_TRACK 120p.mjpeg.mp4 > fmp4.mjpeg.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 120p.mjpeg.mov > fmp4.mjpeg.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 480p.h264.mp4 > fmp4.vp9-h264.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 480p.mpeg4.mp4 > fmp4.vp9-mpeg4.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 288p.h263.3gp > fmp4.vp9-h263.3gp.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 288p.h263.mov > fmp4.vp9-h263.mov.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 120p.mjpeg.mp4 > fmp4.vp9-mjpeg.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 120p.mjpeg.mov > fmp4.vp9-mjpeg.mov.m3u8

24
meta-playlist.php
View file

@ -7,17 +7,18 @@ $audio = [];
$video = []; $video = [];
$audioCodecs = [ $audioCodecs = [
'mpeg' => 'mp4a.40.34', //'mpeg' => 'mp4a.40.34', // (this seems wrong but it works for now)
'mpeg' => 'mp4a.6b', // should work!
//'mpeg' => 'mp3', // doesn't seem to work
'aac' => 'mp4a.40.2', 'aac' => 'mp4a.40.2',
'opus' => 'opus', 'opus' => 'opus',
]; ];
// @fixme use correct settings based on the file // @fixme use correct settings based on the file
$videoCodecs = [ $videoCodecs = [
'vp9' => 'vp09.00.10.08', 'vp9' => 'vp09.00.41.08',
'h264' => 'avc1.42e00a', 'h264' => 'avc1.42e00a',
//'mpeg4' => 'mp4v.20.9', // fail?
//'mpeg4' => 'mp4v.20', //'mpeg4' => 'mp4v.20',
// Lies for desktop safari // Lies for desktop safari
@ -25,18 +26,21 @@ $videoCodecs = [
//'h263' => 'avc1', // lies //'h263' => 'avc1', // lies
// truths // truths
/* //'mjpeg' => 'jpeg', // works on current mac & iOS 16, but not iOS 10
'mjpeg' => 'jpeg', // works on current mac & ios 13, but not ios 10 //'h263' => 's263', // fail? or should it be s263?
'h263' => 's263', //'mpeg4' => 'mp4v.20.9', // fail?
'mpeg4' => 'mp4v',
*/
// These lies work on iOS 10 and iOS 13+ too // These lies work on current mac & and iOS 16, but not iOS 10
//'h263' => 'jpeg', // lies
//'mpeg4' => 'jpeg', // lies
// none of them seem to work on iOS 12!
// These lies work on iOS 10 and iOS 16 too
'mjpeg' => 'avc1.42e00a', // lies 'mjpeg' => 'avc1.42e00a', // lies
'h263' => 'avc1.42e00a', // lies 'h263' => 'avc1.42e00a', // lies
'mpeg4' => 'avc1.42e00a', // lies 'mpeg4' => 'avc1.42e00a', // lies
// none of them seem to work on iOS 12!
]; ];

1
video-js/video.js
View file

@ -56492,6 +56492,7 @@
} }
this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error); this.logger_('Received non QUOTA_EXCEEDED_ERR on append', error);
this.logger_('it was ' + error.code);
this.error(type + " append of " + bytes.length + "b failed for segment " + ("#" + segmentInfo.mediaIndex + " in playlist " + segmentInfo.playlist.id)); // If an append errors, we often can't recover. this.error(type + " append of " + bytes.length + "b failed for segment " + ("#" + segmentInfo.mediaIndex + " in playlist " + segmentInfo.playlist.id)); // If an append errors, we often can't recover.
// (see https://w3c.github.io/media-source/#sourcebuffer-append-error). // (see https://w3c.github.io/media-source/#sourcebuffer-append-error).
// //