Add hls.js

index.html

@@ -27,6 +27,7 @@
   <script src="js/jquery-3.3.1.slim.min.js"></script>
   <script src="js/popper-umd/popper.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
+  <script src="js/hls.min.js"></script>
   <script src="index.js"></script>
 </body>
 

index.js

@@ -1,23 +1,24 @@
 const vids = [{
-    url: "https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
+    url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
     thumbnail: "images/gitea.png",
     name: "Big Buck Bunny",
     subtitle: "Short Desc",
 }, {
-    url: "a.mp4",
+    url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
     thumbnail: "images/gitea.png",
-    name: "Video 2",
+    name: "Sintel",
     subtitle: "Test",
 }, {
-    url: "dog.mp4",
+    url: "https://vdo.mwit.ac.th/vod/_definst_/mp4:02_description/2561/05/30-05-61/VOD/30-05-61-AV4.mp4/playlist.m3u8",
     thumbnail: "images/gitea.png",
-    name: "Video 3",
+    name: "HLS",
     subtitle: "Woo",
 }];
 
 const videoListContainer = document.querySelector('#videoListContainer');
 const titleText = document.querySelector('#titleText');
 const vidPlayer = document.querySelector('#vidPlayer');
+var hls = null;
 
 const createVidList = () => {
   var vidElements = "";
@@ -37,9 +38,23 @@ const createVidList = () => {
 }
 
 const changeVid = index => {
-    console.log('VIDEO IS NOW',index)
-    vidPlayer.src = vids[index].url;
     titleText.innerHTML = vids[index].name;
+
+    if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
+     Hls.isSupported() &&
+     vids[index].url.endsWith(".m3u8")) {
+      if(!hls==null) {
+        hls.detachMedia(vidPlayer);
+      }
+      hls = new Hls();
+      hls.loadSource(vids[index].url);
+      hls.attachMedia(vidPlayer);
+      hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
+    }
+    else {
+      vidPlayer.src = vids[index].url;
+      vidPlayer.play();
+    }
 }
 
 createVidList();