whee

make-hls-new.sh

@@ -33,12 +33,8 @@ ffmpeg -i $INFILE -s 320x180 $VIDEO_JPEG $AUDIO_MP3 $MOVFLAGS -y new-mjpeg.mov
 ffmpeg -i $INFILE -vn $AUDIO_AAC $HLSFLAGS -hls_segment_filename new-aac.mp4 -y new-aac.m3u8
 ffmpeg -i $INFILE -vn $AUDIO_OPUS $HLSFLAGS -hls_segment_filename new-opus.mp4 -y new-opus.m3u8
 
-ffmpeg -i $INFILE -vn $AUDIO_MP3 $HLSFLAGS -hls_segment_filename new-mp3.mp4 -y new-mp3-mp4.m3u8
+ffmpeg -i $INFILE -vn $AUDIO_MP3 -f segment -segment_time 10 -segment_list new-mp3.m3u8 -y new-mp3-%04d.mp3
-ffmpeg -i $INFILE -vn $AUDIO_MP3 $TSFLAGS -hls_segment_filename new-mp3.ts -y new-mp3-ts.m3u8
+php timestamp-id3.php new-mp3.m3u8 new-mp3.mp3
-ffmpeg -i $INFILE -vn $AUDIO_MP3 -f segment -segment_time 10 -segment_list new-mp3-raw.m3u8 -y new-mp3-%04d.mp3
 
 # Video for HLS
 ffmpeg -i $INFILE -an $VIDEO_VP9 $HLSFLAGS -hls_segment_filename new-vp9.mp4 -y new-vp9.m3u8
-
-ffmpeg -i $INFILE -an $VIDEO_JPEG $HLSFLAGS -hls_segment_filename new-jpeg.mp4 -y new-jpeg.m3u8
-ffmpeg -i $INFILE -an $VIDEO_JPEG $TSFLAGS -hls_segment_filename new-jpeg.ts -y new-jpeg-ts.m3u8

new.html

@@ -16,7 +16,7 @@
         <h2>Caminandes - Llamigos</h2>
 
         <p>WebM VP9 and VP8 in front, MJPEG next, HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio activated on JS.</p>
-        <video controls width=640 height=360>
+        <video id=hls1 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="video/quicktime; codecs=&quot;jpeg, mp4a.6b&quot;" src=new-mjpeg.mov>
@@ -52,34 +52,14 @@
             <source type=application/vnd.apple.mpegurl src=new-vp9.m3u8>
         </video>
 
-        <p>HLS MJPEG MP4 alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-jpeg.m3u8>
-        </video>
-
-        <p>HLS MJPEG TS alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-jpeg-ts.m3u8>
-        </video>
-
         <p>HLS Opus MP4 alone (only audio)</p>
         <video controls width=640 height=360>
             <source type=application/vnd.apple.mpegurl src=new-opus.m3u8>
         </video>
 
-        <p>HLS MP3 MP4 alone (only audio)</p>
+        <p>HLS MP3 alone (only audio)</p>
         <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-mp3-mp4.m3u8>
+            <source type=application/vnd.apple.mpegurl src=new-mp3.m3u8>
-        </video>
-
-        <p>HLS MP3 TS alone (only audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-mp3-ts.m3u8>
-        </video>
-
-        <p>HLS MP3 raw alone (only audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-mp3-raw.m3u8>
         </video>
 
         <script>
@@ -133,6 +113,27 @@
                 wasm.textContent = 'no WebAssembly support';
                 wasm.style.color = 'red';
             }
+
+            function prep(vid) {
+                let hls = vid.querySelector('source[type="application/vnd.apple.mpegurl"]');
+                let mjpeg = vid.querySelector('source[type="video/quicktime; codecs=\\"jpeg, mp4a.6b\\""]');
+                if (hls && mjpeg && vid.canPlayType('application/vnd.apple.mpegurl')) {
+                    // Move MJPEG to the end, so HLS has a chance first
+                    vid.removeChild(mjpeg);
+                    vid.appendChild(mjpeg);
+                    // Fail over from HLS to MJPEG
+                    let failover = function(event) {
+                        if (this.error.code === MediaError.MEDIA_ERR_DECODE) {
+                            event.preventDefault();
+                            vid.removeEventListener('error', failover);
+                            vid.src = mjpeg.src;
+                            vid.play();
+                        }
+                    };
+                    vid.addEventListener('error', failover);
+                }
+            }
+            prep(hls1);
         </script>
     </body>
 </html>

new.m3u8

@@ -1,7 +1,7 @@
 #EXTM3U
 
 #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="opus",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="new-opus.m3u8"
-#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="mp3",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="new-mp3-raw.m3u8"
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="mp3",NAME="English",LANGUAGE="en-US",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="new-mp3.m3u8"
 
 #EXT-X-STREAM-INF:BANDWIDTH=2560000,RESOLUTION=1920x1080,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
 new-vp9.m3u8

timestamp-id3.php

@@ -103,9 +103,15 @@ function process_mp3( $filename, $pts ) {
     return "$tag$data";
 }
 
-$playlist = "caminandes-llamigos.webm.audio.mp3.m3u8";
+$args = $_SERVER['argv'];
-$playlist_out = "caminandes-llamigos.webm.audio.mp3.combined.m3u8";
+$self = array_shift( $args );
-$outfile = "caminandes-llamigos.webm.audio.mp3";
+//$playlist = "caminandes-llamigos.webm.audio.mp3.m3u8";
+//$playlist_out = "caminandes-llamigos.webm.audio.mp3.combined.m3u8";
+//$outfile = "caminandes-llamigos.webm.audio.mp3";
+$playlist = array_shift( $args );
+$playlist_out = $playlist;
+$outfile = array_shift( $args );
+
 $lines = file( $playlist, FILE_IGNORE_NEW_LINES + FILE_SKIP_EMPTY_LINES );
 
 $pts = 0.0;
@@ -115,7 +121,7 @@ $chunks = [];
 $offset = 0;
 foreach ( $lines as $line ) {
 
-    // todo: create a single-file version
+    // create a single-file version
     // and rewrite the manifest
 
     /*