Move player js to player.js. Update offline video clip.

ffmpeg.go

@@ -39,7 +39,6 @@ func showStreamOfflineState(configuration Config) {
 			streamMaps = append(streamMaps, fmt.Sprintf("v:%d", index))
 			videoMapsString = strings.Join(videoMaps, " ")
 		}
-
 	}
 
 	framerate := 25
@@ -48,29 +47,32 @@ func showStreamOfflineState(configuration Config) {
 
 	ffmpegFlags := []string{
 		"-hide_banner",
-		"-stream_loop 5000",
+		// "-stream_loop 100",
+		// "-fflags", "+genpts",
 		"-i", configuration.VideoSettings.OfflineImage,
+		"-i", "webroot/thumbnail.png",
+		"-filter_complex", "\"[0:v]scale=2640:2360[bg];[bg][1:v]overlay=200:250:enable='between(t,0,3)'\"",
 		videoMapsString, // All the different video variants
 		"-f hls",
-		"-hls_list_size " + strconv.Itoa(configuration.Files.MaxNumberInPlaylist),
+		// "-hls_list_size " + strconv.Itoa(configuration.Files.MaxNumberInPlaylist),
-		"-hls_time " + strconv.Itoa(configuration.VideoSettings.ChunkLengthInSeconds),
+		"-hls_time 4", // + strconv.Itoa(configuration.VideoSettings.ChunkLengthInSeconds),
-		"-strftime 1",
-		"-use_localtime 1",
 		"-hls_playlist_type", "event",
 		"-master_pl_name", "stream.m3u8",
+		"-strftime 1",
 		"-use_localtime 1",
-		"-hls_flags program_date_time+temp_file",
+		"-hls_flags temp_file",
 		"-tune", "zerolatency",
-		"-framerate " + strconv.Itoa(framerate),
 		"-g " + strconv.Itoa(framerate*2), " -keyint_min " + strconv.Itoa(framerate*2), // multiply your output frame rate * 2. For example, if your input is -framerate 30, then use -g 60
+		"-framerate " + strconv.Itoa(framerate),
 		"-preset " + configuration.VideoSettings.EncoderPreset,
 		"-sc_threshold 0",    // don't create key frames on scene change - only according to -g
-		"-profile:v", "high", // Main – for standard definition (SD) to 640×480, High – for high definition (HD) to 1920×1080
+		"-profile:v", "main", // Main – for standard definition (SD) to 640×480, High – for high definition (HD) to 1920×1080
-		"-movflags +faststart",
+		// "-movflags +faststart",
 		"-pix_fmt yuv420p",
 
 		streamMappingString,
 		"-hls_segment_filename " + path.Join(outputDir, "offline-%s.ts"),
+		// "-s", "720x480", // size
 		variantPlaylistName,
 	}
 
@@ -83,7 +85,6 @@ func showStreamOfflineState(configuration Config) {
 	_, err := exec.Command("sh", "-c", ffmpegCmd).Output()
 	fmt.Println(err)
 	verifyError(err)
-
 }
 
 func startFfmpeg(configuration Config) {
@@ -126,7 +127,8 @@ func startFfmpeg(configuration Config) {
 	streamMappingString = "-var_stream_map \"" + strings.Join(streamMaps, " ") + "\""
 	ffmpegFlags := []string{
 		"-hide_banner",
-		"-re",
+		// "-re",
+		"-fflags", "+genpts",
 		"-i pipe:",
 		// "-vf scale=900:-2", // Re-enable in the future with a config to togging resizing?
 		// "-sws_flags fast_bilinear",
@@ -150,6 +152,7 @@ func startFfmpeg(configuration Config) {
 		"-hls_segment_filename " + path.Join(outputDir, "stream-%Y%m%d-%s.ts"),
 		"-hls_flags delete_segments+program_date_time+temp_file",
 		"-tune zerolatency",
+		// "-s", "720x480", // size
 
 		streamMappingString,
 		variantPlaylistName,

webroot/index.html

@@ -8,10 +8,9 @@
   <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
-  <!-- unpkg : use the latest version of Video.js -->
+  <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet">
-  <link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
   <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
-  <script src="//unpkg.com/video.js/dist/video.min.js"></script>
+  <script src="//vjs.zencdn.net/7.8.2/video.js"></script>
 
   <script src="vendor/autolink.js"></script>
   <link href="./styles/layout.css" rel="stylesheet" />
@@ -73,7 +72,7 @@ GW TODO:
           playsinline
           muted
           poster="/thumbnail.png"
-          data-setup='{}'
+          data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}'
         >
           <source src="hls/stream.m3u8" type="application/x-mpegURL"/>
         </video>
@@ -156,12 +155,12 @@ GW TODO:
     </div>
   </main>
 
+  <script src="js/player/player.js"></script>
   <script src="js/usercolors.js"></script>
   <script src="js/config.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
   <script src="js/app.js"></script>
   <script src="js/player/airplay.js"></script>
-
 </body>
 </html>

webroot/js/app.js

@@ -20,9 +20,6 @@ async function setupApp() {
     },
   });
 
-  // style hackings
-  window.VIDEOJS_NO_DYNAMIC_STYLE = true;
-
   // init messaging interactions
   var appMessagingMisc = new Messaging();
   appMessagingMisc.init();
@@ -43,14 +40,7 @@ async function getStatus() {
       // The stream was offline, but now it's online.  Force start of playback after an arbitrary
       // delay to make sure the stream has actual data ready to go.
       setTimeout(function () {
-        try {
+        restartPlayer();
-          const player = videojs('video');
-          player.src(player.src()); // Reload the same video
-          player.load();
-          player.play();
-        } catch (e) {
-          console.log(e)
-         }
       }, 3000)
       
     }
@@ -117,11 +107,5 @@ function setupWebsocket() {
 
 setupApp()
 
-// Wait until the player is setup before we start polling status
-videojs.hookOnce('setup', function (player) {
-  getStatus();
-  setInterval(getStatus, 5000);
-});
-
 setupWebsocket()
 

webroot/js/player/player.js

@@ -0,0 +1,66 @@
+// style hackings
+window.VIDEOJS_NO_DYNAMIC_STYLE = true;
+
+var waitingTimeoutTimer;
+
+// Wait until the player is setup before we start polling status
+videojs.hookOnce('setup', function (player) {
+  // console.log('setup')
+  getStatus();
+  setInterval(getStatus, 5000);
+  setupPlayerEventHandlers();
+});
+
+function setupPlayerEventHandlers() {
+  const player = videojs('video');
+
+  player.on('error', function (e) {
+    console.log(e);
+  })
+
+  player.on('loadeddata', function (e) {
+    console.log("loadeddata");
+  })
+
+  player.on('ended', function (e) {
+    console.log("ended");
+  })
+
+  // player.on('abort', function (e) {
+  //   console.log("abort");
+  // })
+
+  // player.on('durationchange', function (e) {
+  //   console.log("durationchange");
+  // })
+
+  // player.on('stalled', function (e) {
+  //   console.log("stalled");
+  // })
+  
+  player.on('playing', function (e) {
+    // console.log("playing");
+    clearTimeout(waitingTimeoutTimer);
+  })
+
+  player.on('waiting', function (e) {
+    // console.log("waiting");
+
+    // waitingTimeoutTimer = setTimeout(function () {
+    //   restartPlayer();
+    // }, 3000)
+  })
+}
+
+function restartPlayer() {
+  try {
+    const player = videojs('video');
+
+    player.src(player.src()); // Reload the same video
+    player.load();
+    player.play();
+  } catch (e) {
+    console.log(e)
+  }
+
+}