From 0118ee46affa88c3e9814d1f104966afc9f87ce2 Mon Sep 17 00:00:00 2001
From: Brion Vibber <brion@pobox.com>
Date: Thu, 16 Feb 2023 08:15:33 -0800
Subject: [PATCH] whee

---
 make-hls-new.sh |  50 +++----
 new.html        | 343 +++++++++++++++++++-----------------------------
 new.m3u8        |  10 ++
 3 files changed, 174 insertions(+), 229 deletions(-)
 create mode 100644 new.m3u8

diff --git a/make-hls-new.sh b/make-hls-new.sh
index aa8c576..25804e1 100755
--- a/make-hls-new.sh
+++ b/make-hls-new.sh
@@ -1,40 +1,44 @@
 MOVFLAGS="-movflags +frag_keyframe+empty_moov+default_base_moof+faststart"
 HLSFLAGS="-hls_time 10 -hls_list_size 0 -hls_segment_type fmp4 -hls_flags single_file -hls_playlist_type vod"
-BITRATE_HI="-b:v 3840k"
-BITRATE_LO="-b:v 2560k"
+TSFLAGS="-hls_time 10 -hls_list_size 0 -hls_segment_type mpegts -hls_flags single_file -hls_playlist_type vod"
+BITRATE_HI="-b:v 1250k"
+BITRATE_LO="-b:v 1000k"
 
-VIDEO_H264="-vcodec h264 $BITRATE_HI"
-VIDEO_JPEG="-vcodec mjpeg $BITRATE_HI"
-VIDEO_VP8="-vcodec libvpx -cpu-used 4 $BITRATE_HI"
-VIDEO_VP9="-vcodec libvpx-vp9 -row-mt 1 -cpu-used 4 $BITRATE_LO"
+SIZE_MAIN="-s 854x480"
+SIZE_JPEG="-s 213x120"
+
+VIDEO_H264="-vcodec h264 -g 240 $BITRATE_HI $SIZE_MAIN"
+VIDEO_JPEG="-vcodec mjpeg -g 240 $BITRATE_LO $SIZE_JPEG"
+VIDEO_VP8="-vcodec libvpx -cpu-used 3 -g 240 $BITRATE_HI $SIZE_MAIN"
+VIDEO_VP9="-vcodec libvpx-vp9 -row-mt 1 -cpu-used 3 -g 240 $BITRATE_LO $SIZE_MAIN"
 
 AUDIO_VORBIS="-acodec libvorbis -ac 2 -ar 44100 -vb 128k"
 AUDIO_OPUS="-acodec libopus -ac 2 -ar 48000 -vb 96k"
 AUDIO_AAC="-ac 2 -ar 44100 -vb 128k"
 AUDIO_MP3="-acodec libmp3lame -ac 2 -ar 44100 -vb 128k"
 
-INFILE=polyphon.ogv
+#INFILE=polyphon.ogv
+INFILE=caminandes-llamigos.webm
+
+set -e
 
 # Flat WebM
-ffmpeg -i $INFILE $VIDEO_VP8 $AUDIO_VORBIS -y new-vp8.webm || exit 1
-ffmpeg -i $INFILE $VIDEO_VP9 $AUDIO_OPUS -y new-vp9.webm || exit 1
+ffmpeg -i $INFILE $VIDEO_VP8 $AUDIO_VORBIS -y new-vp8.webm
+ffmpeg -i $INFILE $VIDEO_VP9 $AUDIO_OPUS -y new-vp9.webm
 
 # Flat Quicktime
-ffmpeg -i $INFILE -s 1280x720 -vcodec mpeg2video $BITRATE_HI $AUDIO_MP3 $MOVFLAGS -y new-mpeg2.mov || exit 1
-ffmpeg -i $INFILE -s 640x360 -vcodec mpeg1video $BITRATE_HI $AUDIO_MP3 $MOVFLAGS -y new-mpeg1.mov || exit 1
-ffmpeg -i $INFILE -s 320x180 -vcodec cinepak $BITRATE_HI $AUDIO_MP3 $MOVFLAGS -y new-cinepak.mov || exit 1
-#ffmpeg -i $INFILE -s 320x180 -vcodec rpza $BITRATE_HI $AUDIO_MP3 $MOVFLAGS -y new-rpza.mov || exit 1
-ffmpeg -i $INFILE -s 320x180 $VIDEO_JPEG $AUDIO_MP3 $MOVFLAGS -y new-mjpeg.mov || exit 1
-
-
-exit 0
+ffmpeg -i $INFILE -s 320x180 $VIDEO_JPEG $AUDIO_MP3 $MOVFLAGS -y new-mjpeg.mov
 
 # Audio for HLS
-ffmpeg -i $INFILE -vn $AUDIO_AAC $HLSFLAGS -hls_segment_filename new-aac.mp4 -y new-aac.m3u8 || exit 1
-ffmpeg -i $INFILE -vn $AUDIO_OPUS $HLSFLAGS -hls_segment_filename new-opus.mp4 -y new-opus.m3u8 || exit 1
+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 $TSFLAGS -hls_segment_filename new-mp3.ts -y new-mp3-ts.m3u8
+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 || exit 1
-ffmpeg -i $INFILE -an $VIDEO_JPEG $HLSFLAGS -hls_segment_filename new-jpeg.mp4 -y new-jpeg.m3u8 || exit 1
-ffmpeg -i $INFILE -an -vcodec mpeg2video $BITRATE_HI $HLSFLAGS -hls_segment_filename new-mpeg2.mp4 -y new-mpeg2.m3u8 || exit 1
-ffmpeg -i $INFILE -an -vcodec mpeg1video $BITRATE_HI $HLSFLAGS -hls_segment_filename new-mpeg1.mp4 -y new-mpeg1.m3u8 || exit 1
+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
diff --git a/new.html b/new.html
index 3a1fba8..85f3362 100644
--- a/new.html
+++ b/new.html
@@ -1,207 +1,138 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset=utf-8>
-        <title>HLS VP9/fMP4 test</title>
-        <link rel=stylesheet type=text/css href=video-js/video-js.css>
-    </head>
-    <body>
-        <h1>HLS WebM test</h1>
-
-        <p id=hls>Checking HLS support...</p>
-        <p id=mse>Checking MSE VP9 support...</p>
-        <p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
-        <p id=wasm>Checking WebAssembly support...</p>
-
-        <h2>Caminandes - Llamigos</h2>
-
-        <p>HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio.</p>
-        <video id=hls1 controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new.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>Flat WebM VP8/Vorbis</p>
-        <video id=webm controls width=640 height=360>
-            <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
-        </video>
-
-        <p>Flat Quicktime MJPEG/MP3</p>
-        <video id=mjpeg controls width=640 height=360>
-            <source type="video/quicktime" src=new-mjpeg.mov>
-        </video>
-
-        <p>Flat Quicktime MPEG-2</p>
-        <video id=mjpeg controls width=640 height=360>
-            <source type="video/quicktime" src=new-mpeg2.mov>
-        </video>
-
-        <p>Flat Quicktime MPEG-1</p>
-        <video id=mjpeg controls width=640 height=360>
-            <source type="video/quicktime" src=new-mpeg1.mov>
-        </video>
-
-        <p>Flat Quicktime Cinepak</p>
-        <video id=mjpeg controls width=640 height=360>
-            <source type="video/quicktime" src=new-cinepak.mov>
-        </video>
-
-        <p>HLS MJPEG MP4 alone (no audio)</p>
-        <video id=mjpeg-hls controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-jpeg.m3u8>
-        </video>
-
-        <p>Flat MJPEG MP4 alone (no audio)</p>
-        <video id=mjpeg-hls controls width=640 height=360>
-            <source type=video/mp4 src=new-jpeg.mp4>
-        </video>
-
-        <p>HLS MPEG-1 MP4 alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-mpeg1.m3u8>
-        </video>
-
-        <p>Flat MPEG-1 MP4 alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=video/mp4 src=new-mpeg1.mp4>
-        </video>
-
-        <p>HLS MPEG-2 MP4 alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=application/vnd.apple.mpegurl src=new-mpeg2.m3u8>
-        </video>
-
-        <p>Flat MPEG-2 MP4 alone (no audio)</p>
-        <video controls width=640 height=360>
-            <source type=video/mp4 src=new-mpeg2.mp4>
-        </video>
-
-        <script>
-            if (hls1.canPlayType('application/vnd.apple.mpegurl')) {
-                hls.textContent = 'native HLS playback supported';
-                hls.style.color = 'green';
-            } else {
-                hls.textContent = 'no native HLS';
-                hls.style.color = 'red';
-            }
-            if (typeof MediaSource == 'function') {
-                let codecs = [
-                    ['VP9-in-WebM', 'video/webm; codecs="vp9"'],
-                    ['Opus-in-WebM', 'audio/webm; codecs="opus"'],
-                    ['VP9-in-MP4', 'video/mp4; codecs="vp09.00.10.08"'],
-                    ['Opus-in-MP4', 'audio/mp4; codecs="opus"'],
-                ];
-                let yes = [];
-                let no = [];
-                for (let [name, mime] of codecs) {
-                    if (MediaSource.isTypeSupported(mime)) {
-                        yes.push(name);
-                    } else {
-                        no.push(name);
-                    }
-                }
-                if (yes.length == codecs.length) {
-                    mse.textContent = 'MSE supports ' + yes.join(', ');
-                    mse.style.color = 'green';
-                } else {
-                    mse.textContent = 'MSE supports ' + yes.join(', ') + ' but not ' + no.join(', ');
-                    mse.style.color = 'orange';
-                }
-            } else {
-                mse.textContent = 'MSE not supported';
-                mse.style.color = 'red';
-            }
-            if (hls1.canPlayType('video/webm; codecs="vp8, vorbis"')) {
-                webm.textContent = 'flat WebM VP8/Vorbis supported';
-                webm.style.color = 'green';
-            } else {
-                webm.textContent = 'flat WebM VP8/Vorbis not supported';
-                webm.style.color = 'red';
-            }
-            if (typeof WebAssembly == 'object') {
-                wasm.textContent = 'WebAssembly supported';
-                wasm.style.color = 'green';
-            } else {
-                wasm.textContent = 'no WebAssembly support';
-                wasm.style.color = 'red';
-            }
-        </script>
-        <!--
-        <script src="node_modules/video.js/dist/alt/video.core.js"></script>
-        <script src="http-streaming/dist/videojs-http-streaming.js"></script>
-        
-        <script src=videojs-ogvjs.js></script>
-        -->
-        <script type="text/disabled">
-            var playerConfig = {
-                    responsive: true,
-                    controlBar: {
-                            volumePanel: {
-                                    vertical: true,
-                                    inline: false
-                            }
-                    },
-                    techOrder: [ 'html5' ],
-                    html5: {}
-            };
-
-            function can(mime) {
-                return (typeof MediaSource == 'function') && MediaSource.isTypeSupported(mime);
-            }
-            var vp9 = can('video/mp4; codecs="vp09.00.10.08"');
-            var opus = can('audio/mp4; codecs="opus"');
-            var aac = can('audio/mp4; codecs="mp4a.40.02"');
-            console.log({
-                vp9, opus, aac
-            })
-            var mse = vp9 && (opus || aac);
-            if (mse) {
-                // enable streaming plugin
-                playerConfig.html5 = {
-                    vhs: {
-                        overrideNative: true,
-                        useDevicePixelRatio: true
-                    },    
-                    nativeAudioTracks: false,
-                    nativeVideoTracks: false
-                };
-                console.log('will do mse');
-
-                var m3u8 = null;
-                for (let source of hls1.querySelectorAll('source')) {
-                    if (source.type == 'application/vnd.apple.mpegurl') {
-                        m3u8 = source;
-                        continue;
-                    }
-                }
-
-                videojs.log.level('debug');
-                
-                hls1.classList.add('video-js');
-                hls1.classList.add('vjs-default-skin');
-                var vjs1 = videojs(hls1, playerConfig);
-
-                vjs1.on('error', function failover() {
-                    console.log('got error');
-                    var error = vjs1.error();
-                    if (error && error.code == MediaError.MEDIA_ERR_DECODE) {
-                        console.log('saw its a decode error');
-                        // HLS reports this if it can't find a codec it likes
-                        console.log(m3u8);
-                        if (mse && m3u8) {
-                            console.log('going to m3u8: ' + m3u8.getAttribute('src'));
-                            vjs1.src([{
-                                src: m3u8.getAttribute('src'),
-                                type: m3u8.getAttribute('type')
-                            }]);
-                            vjs1.reset();
-                            m3u8 = null;
-                        }
-                    }
-                    vjs1.off('error', failover);
-                });
-            }
-        </script>
-    </body>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset=utf-8>
+        <title>HLS VP9/fMP4 test</title>
+        <link rel=stylesheet type=text/css href=video-js/video-js.css>
+    </head>
+    <body>
+        <h1>HLS WebM test</h1>
+
+        <p id=hls>Checking HLS support...</p>
+        <p id=mse>Checking MSE VP9 support...</p>
+        <p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
+        <p id=wasm>Checking WebAssembly support...</p>
+
+        <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>
+            <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>
+            <source type=application/vnd.apple.mpegurl src=new.m3u8>
+        </video>
+
+        <h2>Sources</h2>
+
+        <p>Flat WebM VP9/Opus</p>
+        <video controls width=640 height=360>
+            <source type="video/webm; codecs=&quot;vp9, opus&quot;" src=new-vp9.webm>
+        </video>
+
+        <p>Flat WebM VP8/Vorbis</p>
+        <video controls width=640 height=360>
+            <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
+        </video>
+
+        <p>Flat Quicktime MJPEG/MP3</p>
+        <video controls width=640 height=360>
+            <source type="video/quicktime; codecs=&quot;jpeg, mp4a.6b&quot;" src=new-mjpeg.mov>
+        </video>
+
+        <p>HLS</p>
+        <video controls width=640 height=360>
+            <source type=application/vnd.apple.mpegurl src=new.m3u8>
+        </video>
+
+        <h2>Components</h2>
+
+        <p>HLS VP9 MP4 alone (no audio)</p>
+        <video controls width=640 height=360>
+            <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>
+        <video controls width=640 height=360>
+            <source type=application/vnd.apple.mpegurl src=new-mp3-mp4.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>
+            let video = document.createElement('video');
+            if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                hls.textContent = 'native HLS playback supported';
+                hls.style.color = 'green';
+            } else {
+                hls.textContent = 'no native HLS';
+                hls.style.color = 'red';
+            }
+            if (typeof MediaSource == 'function') {
+                let codecs = [
+                    ['VP9-in-WebM', 'video/webm; codecs="vp9"'],
+                    ['Opus-in-WebM', 'audio/webm; codecs="opus"'],
+                    ['VP9-in-MP4', 'video/mp4; codecs="vp09.00.10.08"'],
+                    ['Opus-in-MP4', 'audio/mp4; codecs="opus"'],
+                    ['MP3', 'audio/mp3'],
+                ];
+                let yes = [];
+                let no = [];
+                for (let [name, mime] of codecs) {
+                    if (MediaSource.isTypeSupported(mime)) {
+                        yes.push(name);
+                    } else {
+                        no.push(name);
+                    }
+                }
+                if (yes.length == codecs.length) {
+                    mse.textContent = 'MSE supports ' + yes.join(', ');
+                    mse.style.color = 'green';
+                } else {
+                    mse.textContent = 'MSE supports ' + yes.join(', ') + ' but not ' + no.join(', ');
+                    mse.style.color = 'orange';
+                }
+            } else {
+                mse.textContent = 'MSE not supported';
+                mse.style.color = 'red';
+            }
+            if (video.canPlayType('video/webm')) {
+                webm.textContent = 'flat WebM supported';
+                webm.style.color = 'green';
+            } else {
+                webm.textContent = 'flat WebM not supported';
+                webm.style.color = 'red';
+            }
+            if (typeof WebAssembly == 'object') {
+                wasm.textContent = 'WebAssembly supported';
+                wasm.style.color = 'green';
+            } else {
+                wasm.textContent = 'no WebAssembly support';
+                wasm.style.color = 'red';
+            }
+        </script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/new.m3u8 b/new.m3u8
new file mode 100644
index 0000000..be247ce
--- /dev/null
+++ b/new.m3u8
@@ -0,0 +1,10 @@
+#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-STREAM-INF:BANDWIDTH=2560000,RESOLUTION=1920x1080,FRAME-RATE=24.0,CODECS="vp09.00.10.08,opus",AUDIO="opus"
+new-vp9.m3u8
+
+#EXT-X-STREAM-INF:BANDWIDTH=2560000,RESOLUTION=1920x1080,FRAME-RATE=24.0,CODECS="vp09.00.10.08,mp4a.40.34",AUDIO="mp3"
+new-vp9.m3u8