From cde10f5bf71f2b45e567c063c72b9e973f0dffca Mon Sep 17 00:00:00 2001
From: Brion Vibber <brion@pobox.com>
Date: Sun, 26 Jun 2022 14:17:53 -0700
Subject: [PATCH] whee

---
 audio.html                     | 66 +++++++++++++++++++++++++---------
 av-aac-vp8.m3u8                |  2 +-
 av-mp3mp4-h264.m3u8            |  2 +-
 llamigos-vp9-opus-aac-mp3.m3u8 | 10 +++---
 make-hls2.sh                   | 10 +++++-
 mp3.html                       | 47 ++++++++++++++----------
 ogv.html                       | 19 ++++++----
 transcode-segment.php          | 22 ++++++++++--
 8 files changed, 126 insertions(+), 52 deletions(-)

diff --git a/audio.html b/audio.html
index 4954362..6d726a8 100644
--- a/audio.html
+++ b/audio.html
@@ -8,34 +8,64 @@
         <h1>HLS WebM test with codec</h1>
 
         <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>
         </video>
-        <p id=err1></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>
         </video>
-        <p id=err2></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>
         </video>
-        <p id=err3></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>
         </video>
-        <p id=err4></p>
 
-        <p>Opus in MP4</p>
-        <video id=hls5 controls width=640 height=360>
+        <p>MP3 in MP4 (as mp4a.6b)</p>
+        <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>
         </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>
             let codes = {
@@ -51,11 +81,15 @@
                     err.textContent = `${code} ${codeName}: ${message}`;
                 });
             }
-            errify(hls1, err1);
-            errify(hls2, err2);
-            errify(hls3, err3);
-            errify(hls4, err4);
-            errify(hls5, err5);
+            for (let hls of document.querySelectorAll('video')) {
+                let err = document.createElement('p');
+                if (hls.nextSibling) {
+                    hls.parentNode.insertBefore(err, hls.nextSibling);
+                } else {
+                    hls.parentNode.appendChild(err);
+                }
+                errify(hls, err);
+            }
         </script>
 
     </body>
diff --git a/av-aac-vp8.m3u8 b/av-aac-vp8.m3u8
index b8f37ac..3dcfa41 100644
--- a/av-aac-vp8.m3u8
+++ b/av-aac-vp8.m3u8
@@ -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-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
diff --git a/av-mp3mp4-h264.m3u8 b/av-mp3mp4-h264.m3u8
index 231ea4d..4f55870 100644
--- a/av-mp3mp4-h264.m3u8
+++ b/av-mp3mp4-h264.m3u8
@@ -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-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
diff --git a/llamigos-vp9-opus-aac-mp3.m3u8 b/llamigos-vp9-opus-aac-mp3.m3u8
index 2081bbb..7f973cb 100644
--- a/llamigos-vp9-opus-aac-mp3.m3u8
+++ b/llamigos-vp9-opus-aac-mp3.m3u8
@@ -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"
 
 # 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
-#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
-#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
-#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
-#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
 
 # AAC-based temporary experiment (may not be able to use)
diff --git a/make-hls2.sh b/make-hls2.sh
index 04f9827..fabfb05 100644
--- a/make-hls2.sh
+++ b/make-hls2.sh
@@ -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_AAC="-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
 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_OPUS -y polyphon-opus.webm
 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
 
@@ -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_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_ALAC -vf "drawtext=text='vp9-alac.mp4':fontsize=72:fontcolor=violet" $VIDEO_VP9 $MOVFLAGS -y polyphon-vp9-alac.mp4
+fi
+
diff --git a/mp3.html b/mp3.html
index 09e1aa0..8a92136 100644
--- a/mp3.html
+++ b/mp3.html
@@ -5,36 +5,41 @@
         <title>HLS WebM test with codec</title>
     </head>
     <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>
-        <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>
         </video>
-        <p id=err1></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>
         </video>
-        <p id=err2></p>
 
-        <p>And with MP3-in-MP4 audio (marked as mp3):</p>
-        <video id=hls3 controls width=640 height=360>
+        <p>And with MP3-in-MP4 audio (marked as mp4a.6b):</p>
+        <video controls width=640 height=360>
             <source type=application/vnd.apple.mpegurl src=av-mp3mp4-h264.m3u8>
         </video>
-        <p id=err3></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>
         </video>
-        <p id=err4></p>
 
-        <p>And with MP3-in-TS audio:</p>
-        <video id=hls5 controls width=640 height=360>
+        <p>And with MP3-in-TS audio (marked as mp4a.40.34):</p>
+        <video controls width=640 height=360>
             <source type=application/vnd.apple.mpegurl src=av-ts-h264.m3u8>
         </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>
             let codes = {
@@ -50,12 +55,16 @@
                     err.textContent = `${code} ${codeName}: ${message}`;
                 });
             }
-            errify(hls1, err1);
-            errify(hls2, err2);
-            errify(hls3, err3);
-            errify(hls4, err4);
-            errify(hls5, err5);
-        </script>
+            for (let hls of document.querySelectorAll('video')) {
+                let err = document.createElement('p');
+                if (hls.nextSibling) {
+                    hls.parentNode.insertBefore(err, hls.nextSibling);
+                } else {
+                    hls.parentNode.appendChild(err);
+                }
+                errify(hls, err);
+            }
+       </script>
 
     </body>
 </html>
\ No newline at end of file
diff --git a/ogv.html b/ogv.html
index b553f5c..ecc8f9a 100644
--- a/ogv.html
+++ b/ogv.html
@@ -15,18 +15,23 @@
 
         <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>
-            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-opus.m3u8>
-            <source type=video/webm src=caminandes-llamigos.webm.flat.webm>
+            <source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus-aac-mp3.m3u8>
+            <!--<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>
 
         <p>Desired behavior:</p>
         <ul>
-            <li>Firefox/Chrome: play via MSE with VP9/Opus (working, with patch to VHS)</li>
-            <li>Desktop Safari with VP9 support: play via MSE with VP9/MP3 (currently fails)</li>
-            <li>iOS Safari with VP9 support: play native HLS with VP9/MP3 (works)</li>
-            <li>Older iOS and desktop Safari without VP9: play via ogv.js with WebM VP8/Vorbis (currently fails)</li>
+            <li>Firefox/Chrome: play via MSE with VP9/Opus (working)</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/AAC or MP3 (works)</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>
         </ul>
 
diff --git a/transcode-segment.php b/transcode-segment.php
index b6bdcdc..7eccd59 100644
--- a/transcode-segment.php
+++ b/transcode-segment.php
@@ -40,6 +40,13 @@ class Audio {
                 '-b:a', '96k',
             ],
         ],
+        'vorbis.webm' => [
+            'container' => 'webm',
+            'options' => [
+                '-acodec', 'libvorbis',
+                '-b:a', '112k',
+            ],
+        ],
         // with the added id3 timestamps this work great with iOS HLS
         // but mac safari doesn't seem happy with anything i do with them
         'mp3' => [
@@ -275,6 +282,14 @@ class Transcoder {
                 '-hls_segment_filename', $segment,
                 '-y', $playlist,
             ];
+        } elseif ( $container == 'webm' ) {
+            $segment = "$outfile.%04d.$container";
+            $segmentOptions = [
+                '-f', 'segment',
+                '-segment_time', '10',
+                '-segment_list', $playlist,
+                '-y', $segment
+            ];
         } elseif ( $container == 'mov' ) {
             // For MJPEG, MP4 doesn't work in Apple HLS for some reason
             // but QuickTime is sortof ok for one segment?
@@ -372,8 +387,10 @@ $infiles = [
 foreach ( $infiles as $filename ) {
     $source = new SourceFile( $filename );
     $codec = new Transcoder( $source );
-    $codec->audio('aac');
-    $codec->audio('opus');
+    //$codec->audio('aac');
+    //$codec->audio('opus');
+    $codec->audio('vorbis.webm');
+    /*
     $codec->audio('mp3');
     $codec->audio('mp3.ts');
     $codec->audio('mp3.mp4');
@@ -391,4 +408,5 @@ foreach ( $infiles as $filename ) {
             $codec->video('vp9', $res, 'pass2');
         }
     }
+    */
 }