Replace hls.js with videojs for web playback

webroot/index.html

@@ -6,8 +6,17 @@
     href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
     rel="stylesheet"
   />
+
+  <!-- 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>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+
+<script src="//vjs.zencdn.net/7.8.2/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>
@@ -20,11 +29,16 @@
     <div class="w-4/6">
       <video
         id="video"
+        class="video-js vjs-theme-fantasy"
         preload="auto"
+        poster="https://picsum.photos/900/600"
         autoplay
         controls
         style="width: 100%;"
-      ></video>
+        data-setup='{}'
+      >
+      <source src="hls/stream.m3u8" type="application/x-mpegURL"/>
+    </video>
       <div id="app">
         {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
       </div>

webroot/js/app.js

@@ -106,37 +106,6 @@ getStatus()
 setupWebsocket()
 setInterval(getStatus, 5000)
 
-// HLS Video setup
-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({