Move to videojs and point to remote video on goth.land

webroot/index.html

@@ -8,7 +8,14 @@
   />
   <link href="./styles/layout.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+ 
+  <!-- unpkg : use the latest version of Video.js -->
+<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>
 
   <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
   <script src="vendor/jquery-2.1.4.min.js"></script>
@@ -52,13 +59,17 @@
 
         <div id="video-container" class="flex shadow-md">
           <video
+            class="video-js vjs-theme-fantasy"
             id="video"
             preload="auto"
             controls
             autoplay
             muted
-            src="https://goth.land/hls/stream.m3u8"
-          ></video>
+            poster="https://goth.land/thumbnail.png"
+            data-setup='{}'
+          >
+            <source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/>
+          </video>
         </div>
 
         <div id="stream-info">
@@ -121,10 +132,6 @@
         </div>
       </div>
     </div>
-
-
-
-
   </div>
 
   <script src="js/message.js"></script>

webroot/js/app.js

@@ -109,37 +109,6 @@ getStatus()
 setupWebsocket()
 // setInterval(getStatus, 5000)
 
-// HLS Video setup.  Commented out for local html work.  Uncomment to make HLS work.
-// const video = document.getElementById("video")
-// const videoSrc = "hls/stream.m3u8"
-// if (Hls.isSupported()) {
-//   var hls = new Hls()
-//   hls.loadSource(videoSrc)
-//   hls.attachMedia(video)
-//   hls.on(Hls.Events.MANIFEST_PARSED, function () {
-//     video.play()
-//   });
-// }
-// // hls.js is not supported on platforms that do not have Media Source
-// // Extensions (MSE) enabled.
-// //
-// // When the browser has built-in HLS support (check using `canPlayType`),
-// // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
-// // element through the `src` property. This is using the built-in support
-// // of the plain video element, without using hls.js.
-// //
-// // Note: it would be more normal to wait on the 'canplay' event below however
-// // on Safari (where you are most likely to find built-in HLS support) the
-// // video.src URL must be on the user-driven white-list before a 'canplay'
-// // event will be emitted; the last video event that can be reliably
-// // listened-for when the URL is not on the white-list is 'loadedmetadata'.
-// else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-//   video.src = videoSrc
-//   video.addEventListener("loadedmetadata", function () {
-//     video.play()
-//   });
-// }
-
 function scrollSmoothToBottom(id) {
   const div = document.getElementById(id);
   $('#' + id).animate({