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

whee

Browse source
This commit is contained in:
Brooke Vibber 2022-06-26 14:17:53 -07:00
parent 70d6c7366a
commit cde10f5bf7
8 changed files with 126 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
audio.html
View file

@ -8,34 +8,64 @@
<h1>HLS WebM test with codec</h1> <h1>HLS WebM test with codec</h1>
<p>AAC in MP4</p> <p>AAC in MP4</p>
<video id=hls1 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-aac-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-aac-mp4.m3u8>
</video> </video>
<p id=err1></p>
<p>ALAC in MP4</p> <p>ALAC in MP4</p>
<video id=hls2 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-alac-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-alac-mp4.m3u8>
</video> </video>
<p id=err2></p>
<p>FLAC in MP4</p> <p>FLAC in MP4</p>
<video id=hls3 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-flac-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-flac-mp4.m3u8>
</video> </video>
<p id=err3></p>
<p>MP3 stream</p> <p>MP3 stream</p>
<video id=hls4 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8>
</video> </video>
<p id=err4></p>
<p>Opus in MP4</p> <p>MP3 in MP4 (as mp4a.6b)</p>
<video id=hls5 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3mp4-h264.m3u8>
</video>
<p>MP3 in MP4 (as mp4a.40.34)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3mp4b-h264.m3u8>
</video>
<p>MP3 in MP4 (as mp3)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3mp4c-h264.m3u8>
</video>
<p>Opus in MP4 (as mp4a.ad)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-opus-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-opus-mp4.m3u8>
</video> </video>
<p id=err5></p>
<p>Opus in MP4 (as opus)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-opusb-mp4.m3u8>
</video>
<p>Opus in MP4 (as Opus)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-opusc-mp4.m3u8>
</video>
<p>Vorbis in MP4 (as mp4a.dd.0)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-vorbis-mp4.m3u8>
</video>
<p>Vorbis in MP4 (as vorbis)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-vorbisb-mp4.m3u8>
</video>
<script> <script>
let codes = { let codes = {
@ -51,11 +81,15 @@
err.textContent = `${code} ${codeName}: ${message}`; err.textContent = `${code} ${codeName}: ${message}`;
}); });
} }
errify(hls1, err1); for (let hls of document.querySelectorAll('video')) {
errify(hls2, err2); let err = document.createElement('p');
errify(hls3, err3); if (hls.nextSibling) {
errify(hls4, err4); hls.parentNode.insertBefore(err, hls.nextSibling);
errify(hls5, err5); } else {
hls.parentNode.appendChild(err);
}
errify(hls, err);
}
</script> </script>
</body> </body>

2
av-aac-vp8.m3u8
View file

@ -2,5 +2,5 @@
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="a1",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="audio-aac.m3u8" #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="a1",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="audio-aac.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=4785000,RESOLUTION=1920x1080,FRAME-RATE=29.970,CODECS="vp08.00.10.08,mp4a.40.02",AUDIO="a1" #EXT-X-STREAM-INF:BANDWIDTH=4785000,RESOLUTION=1920x1080,FRAME-RATE=29.970,CODECS="vp08,mp4a.40.02",AUDIO="a1"
vp8-in-mp4.m3u8 vp8-in-mp4.m3u8

2
av-mp3mp4-h264.m3u8
View file

@ -2,5 +2,5 @@
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="a1",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="mp3-in-mp4.m3u8" #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="a1",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="mp3-in-mp4.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=4785000,RESOLUTION=1920x1080,FRAME-RATE=29.970,CODECS="avc1.42e00a,mp3",AUDIO="a1" #EXT-X-STREAM-INF:BANDWIDTH=4785000,RESOLUTION=1920x1080,FRAME-RATE=29.970,CODECS="avc1.42e00a,mp4a.6b",AUDIO="a1"
h264-in-mp4.m3u8 h264-in-mp4.m3u8

10
llamigos-vp9-opus-aac-mp3.m3u8
View file

@ -6,15 +6,15 @@
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="mp3",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="caminandes-llamigos.webm.audio.mp3.m3u8" #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="mp3",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="caminandes-llamigos.webm.audio.mp3.m3u8"
# Opus-based preferred # Opus-based preferred
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080,FRAME-RATE=24.0,CODECS="vp09.00.10.08,Opus",AUDIO="opus" #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
caminandes-llamigos.webm.1080p.vp9.fast.m3u8 caminandes-llamigos.webm.1080p.vp9.fast.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,FRAME-RATE=24.0,CODECS="vp09.00.10.08,Opus",AUDIO="opus" #EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
caminandes-llamigos.webm.720p.vp9.fast.m3u8 caminandes-llamigos.webm.720p.vp9.fast.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=875000,RESOLUTION=854x480,FRAME-RATE=24.0,CODECS="vp09.00.10.08,Opus",AUDIO="opus" #EXT-X-STREAM-INF:BANDWIDTH=875000,RESOLUTION=854x480,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
caminandes-llamigos.webm.480p.vp9.fast.m3u8 caminandes-llamigos.webm.480p.vp9.fast.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=375000,RESOLUTION=640x360,FRAME-RATE=24.0,CODECS="vp09.00.10.08,Opus",AUDIO="opus" #EXT-X-STREAM-INF:BANDWIDTH=375000,RESOLUTION=640x360,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
caminandes-llamigos.webm.360p.vp9.fast.m3u8 caminandes-llamigos.webm.360p.vp9.fast.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=275000,RESOLUTION=426x240,FRAME-RATE=24.0,CODECS="vp09.00.10.08,Opus",AUDIO="opus" #EXT-X-STREAM-INF:BANDWIDTH=275000,RESOLUTION=426x240,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
caminandes-llamigos.webm.240p.vp9.fast.m3u8 caminandes-llamigos.webm.240p.vp9.fast.m3u8
# AAC-based temporary experiment (may not be able to use) # AAC-based temporary experiment (may not be able to use)

10
make-hls2.sh
View file

@ -12,6 +12,9 @@ AUDIO_VORBIS="-acodec libvorbis -ac 2 -ar 44100 -vb 128k"
AUDIO_OPUS="-acodec libopus -ac 2 -ar 48000 -vb 128k" AUDIO_OPUS="-acodec libopus -ac 2 -ar 48000 -vb 128k"
AUDIO_AAC="-ac 2 -ar 44100 -vb 128k" AUDIO_AAC="-ac 2 -ar 44100 -vb 128k"
AUDIO_MP3="-acodec libmp3lame -ac 2 -ar 44100 -vb 128k" AUDIO_MP3="-acodec libmp3lame -ac 2 -ar 44100 -vb 128k"
AUDIO_MP2="-acodec mp2 -ac 2 -ar 44100 -vb 128k"
AUDIO_ALAC="-acodec alac -sample_fmt s16 -ac 1 -ar 22050"
if false if false
then then
@ -20,6 +23,9 @@ ffmpeg -i polyphon.ogv -vn $AUDIO_MP3 $MOVFLAGS -y polyphon-mp3.mp4
ffmpeg -i polyphon.ogv -vn $AUDIO_AAC $MOVFLAGS -y polyphon-aac.mp4 ffmpeg -i polyphon.ogv -vn $AUDIO_AAC $MOVFLAGS -y polyphon-aac.mp4
ffmpeg -i polyphon.ogv -vn $AUDIO_OPUS -y polyphon-opus.webm ffmpeg -i polyphon.ogv -vn $AUDIO_OPUS -y polyphon-opus.webm
ffmpeg -i polyphon.ogv -vn $AUDIO_OPUS $MOVFLAGS -y polyphon-opus.mp4 ffmpeg -i polyphon.ogv -vn $AUDIO_OPUS $MOVFLAGS -y polyphon-opus.mp4
ffmpeg -i polyphon.ogv -vn $AUDIO_VORBIS $MOVFLAGS -y polyphon-vorbis.mp4
ffmpeg -i polyphon.ogv -vn $AUDIO_MP2 $MOVFLAGS -y polyphon-mp2.mp4
ffmpeg -i polyphon.ogv -vn $AUDIO_ALAC $MOVFLAGS -y polyphon-alac.mp4
ffmpeg -i polyphon.ogv -an -vf "drawtext=text='h264.mp4':fontsize=72:fontcolor=red" $VIDEO_H264 $MOVFLAGS -y polyphon-h264.mp4 ffmpeg -i polyphon.ogv -an -vf "drawtext=text='h264.mp4':fontsize=72:fontcolor=red" $VIDEO_H264 $MOVFLAGS -y polyphon-h264.mp4
@ -50,5 +56,7 @@ ffmpeg -i polyphon.ogv $AUDIO_AAC -vf "drawtext=text='vp9-aac.mp4':fontsize=72:f
ffmpeg -i polyphon.ogv $AUDIO_VORBIS -vf "drawtext=text='vp8-vorbis.webm':fontsize=72:fontcolor=darkcyan" $VIDEO_VP8 -y polyphon-vp8-vorbis.webm ffmpeg -i polyphon.ogv $AUDIO_VORBIS -vf "drawtext=text='vp8-vorbis.webm':fontsize=72:fontcolor=darkcyan" $VIDEO_VP8 -y polyphon-vp8-vorbis.webm
ffmpeg -i polyphon.ogv $AUDIO_OPUS -vf "drawtext=text='vp9-opus.webm':fontsize=72:fontcolor=darkgreen" $VIDEO_VP9 -y polyphon-vp9-opus.webm ffmpeg -i polyphon.ogv $AUDIO_OPUS -vf "drawtext=text='vp9-opus.webm':fontsize=72:fontcolor=darkgreen" $VIDEO_VP9 -y polyphon-vp9-opus.webm
fi
ffmpeg -i polyphon.ogv $AUDIO_MP3 -vf "drawtext=text='vp9-mp3.mp4':fontsize=72:fontcolor=purple" $VIDEO_VP9 $MOVFLAGS -y polyphon-vp9-mp3.mp4 ffmpeg -i polyphon.ogv $AUDIO_MP3 -vf "drawtext=text='vp9-mp3.mp4':fontsize=72:fontcolor=purple" $VIDEO_VP9 $MOVFLAGS -y polyphon-vp9-mp3.mp4
ffmpeg -i polyphon.ogv $AUDIO_ALAC -vf "drawtext=text='vp9-alac.mp4':fontsize=72:fontcolor=violet" $VIDEO_VP9 $MOVFLAGS -y polyphon-vp9-alac.mp4
fi

47
mp3.html
View file

@ -5,36 +5,41 @@
<title>HLS WebM test with codec</title> <title>HLS WebM test with codec</title>
</head> </head>
<body> <body>
<h1>HLS WebM test with codec</h1> <h1>HLS tests with MP3 audio</h1>
<p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with MP3 audio:</p> <p>The video will try to load an HLS containing VP9-in-MP4 and fallback variants, with MP3 audio:</p>
<video id=hls1 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8> <source type=application/vnd.apple.mpegurl src=av-mp3-mp4.m3u8>
</video> </video>
<p id=err1></p>
<p>And with MP3 audio and only H.264 (marked as mp4a.40.34):</p> <p>And with MP3 audio and only H.264 (marked as mp4a.40.34):</p>
<video id=hls2 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3-h264.m3u8> <source type=application/vnd.apple.mpegurl src=av-mp3-h264.m3u8>
</video> </video>
<p id=err2></p>
<p>And with MP3-in-MP4 audio (marked as mp3):</p> <p>And with MP3-in-MP4 audio (marked as mp4a.6b):</p>
<video id=hls3 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3mp4-h264.m3u8> <source type=application/vnd.apple.mpegurl src=av-mp3mp4-h264.m3u8>
</video> </video>
<p id=err3></p>
<p>And with MP3-in-MP4 audio (marked as mp4a.40.34):</p> <p>And with MP3-in-MP4 audio (marked as mp4a.40.34):</p>
<video id=hls4 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-mp3mp4b-h264.m3u8> <source type=application/vnd.apple.mpegurl src=av-mp3mp4b-h264.m3u8>
</video> </video>
<p id=err4></p>
<p>And with MP3-in-TS audio:</p> <p>And with MP3-in-TS audio (marked as mp4a.40.34):</p>
<video id=hls5 controls width=640 height=360> <video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=av-ts-h264.m3u8> <source type=application/vnd.apple.mpegurl src=av-ts-h264.m3u8>
</video> </video>
<p id=err5></p>
<p>Now VP9 plus MP3 combined in MP4 (marked as mp4a.6b)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=combined-vp9-mp3.m3u8>
</video>
<p>Now VP9 plus MP3 combined in MP4 (direct playlist)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=combined-vp9-mp3-mp4.m3u8>
</video>
<script> <script>
let codes = { let codes = {
@ -50,12 +55,16 @@
err.textContent = `${code} ${codeName}: ${message}`; err.textContent = `${code} ${codeName}: ${message}`;
}); });
} }
errify(hls1, err1); for (let hls of document.querySelectorAll('video')) {
errify(hls2, err2); let err = document.createElement('p');
errify(hls3, err3); if (hls.nextSibling) {
errify(hls4, err4); hls.parentNode.insertBefore(err, hls.nextSibling);
errify(hls5, err5); } else {
</script> hls.parentNode.appendChild(err);
}
errify(hls, err);
}
</script>
</body> </body>
</html> </html>

19
ogv.html
View file

@ -15,18 +15,23 @@
<h2>Caminandes - Llamigos</h2> <h2>Caminandes - Llamigos</h2>
<p>HLS with VP9-in-MP4 video and Opus-in-MP4 and MP3 audio. Flat WebM fallback with ogv.js loader.</p> <p>HLS with VP9-in-MP4 video and Opus-in-MP4, AAC-in-MP4, and MP3 audio. Flat WebM fallback with ogv.js loader.</p>
<video id=hls1 controls width=640 height=360> <video id=hls1 controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-opus.m3u8> <source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus-aac-mp3.m3u8>
<source type=video/webm src=caminandes-llamigos.webm.flat.webm> <!--<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-opus.m3u8>-->
<!--<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3ts-opus.m3u8>-->
<!--<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-vorbis.m3u8>-->
<source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=caminandes-llamigos.webm.flat.webm>
<source type="video/quicktime; codecs=&quot;jpeg, mp3&quot;" src=polyphon-jpeg-mp3.mov>
</video> </video>
<p>Desired behavior:</p> <p>Desired behavior:</p>
<ul> <ul>
<li>Firefox/Chrome: play via MSE with VP9/Opus (working, with patch to VHS)</li> <li>Firefox/Chrome: play via MSE with VP9/Opus (working)</li>
<li>Desktop Safari with VP9 support: play via MSE with VP9/MP3 (currently fails)</li> <li>Desktop Safari with VP9 support: play via MSE with VP9/AAC or MP3 (currently MP3 fails)</li>
<li>iOS Safari with VP9 support: play native HLS with VP9/MP3 (works)</li> <li>iOS Safari with VP9 support: play native HLS with VP9/AAC or MP3 (works)</li>
<li>Older iOS and desktop Safari without VP9: play via ogv.js with WebM VP8/Vorbis (currently fails)</li> <li>Older iOS and desktop Safari without VP9: play via ogv.js with WebM VP8/Vorbis (WebKit issue with some devices, in progress)</li>
<li>Older iOS and desktop Safari without WebAssembly or with JS off: play backup MJPEG :D (HLS will take over but fail without JS)</li>
<li>Very old Firefox/Chrome: play native WebM VP8/Vorbis</li> <li>Very old Firefox/Chrome: play native WebM VP8/Vorbis</li>
</ul> </ul>

22
transcode-segment.php
View file

@ -40,6 +40,13 @@ class Audio {
'-b:a', '96k', '-b:a', '96k',
], ],
], ],
'vorbis.webm' => [
'container' => 'webm',
'options' => [
'-acodec', 'libvorbis',
'-b:a', '112k',
],
],
// with the added id3 timestamps this work great with iOS HLS // with the added id3 timestamps this work great with iOS HLS
// but mac safari doesn't seem happy with anything i do with them // but mac safari doesn't seem happy with anything i do with them
'mp3' => [ 'mp3' => [
@ -275,6 +282,14 @@ class Transcoder {
'-hls_segment_filename', $segment, '-hls_segment_filename', $segment,
'-y', $playlist, '-y', $playlist,
]; ];
} elseif ( $container == 'webm' ) {
$segment = "$outfile.%04d.$container";
$segmentOptions = [
'-f', 'segment',
'-segment_time', '10',
'-segment_list', $playlist,
'-y', $segment
];
} elseif ( $container == 'mov' ) { } elseif ( $container == 'mov' ) {
// For MJPEG, MP4 doesn't work in Apple HLS for some reason // For MJPEG, MP4 doesn't work in Apple HLS for some reason
// but QuickTime is sortof ok for one segment? // but QuickTime is sortof ok for one segment?
@ -372,8 +387,10 @@ $infiles = [
foreach ( $infiles as $filename ) { foreach ( $infiles as $filename ) {
$source = new SourceFile( $filename ); $source = new SourceFile( $filename );
$codec = new Transcoder( $source ); $codec = new Transcoder( $source );
$codec->audio('aac'); //$codec->audio('aac');
$codec->audio('opus'); //$codec->audio('opus');
$codec->audio('vorbis.webm');
/*
$codec->audio('mp3'); $codec->audio('mp3');
$codec->audio('mp3.ts'); $codec->audio('mp3.ts');
$codec->audio('mp3.mp4'); $codec->audio('mp3.mp4');
@ -391,4 +408,5 @@ foreach ( $infiles as $filename ) {
$codec->video('vp9', $res, 'pass2'); $codec->video('vp9', $res, 'pass2');
} }
} }
*/
} }