m3u8 support with videojs

elvistony · Oct 16, 2024 · b879bcc · b879bcc
1 parent 2611d2c
commit b879bcc
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 26 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -6,6 +6,8 @@
     <title>BingeBud | Admin Controls</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.min.css" rel="stylesheet">
     <!-- <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet"> -->
 </head>
 <body>
@@ -16,6 +18,7 @@ <h3>Theatre Controls</h3>
           <div class="mb-3">
             <label for="VideoURL" class="form-label">URL</label>
             <input type="text" class="form-control" id="VideoURL" placeholder="URL">
+            <input type="text" class="form-control" id="VideoURLType" placeholder="normal or m3u8">
             <button class="btn btn-primary btn-sm mt-2" id="dailymotionSource">Dailymotion</button>
             <button class="btn btn-primary btn-sm mt-2" id="previewSource">Preview</button>
           </div>
@@ -41,7 +44,11 @@ <h4>Subtitles</h4>
         <div class="col-md-6">
             <div class="row mt-4 mb-3">
                 <h3>Theatre Playback</h3>
-            <video controls muted src="../assets/video/wait.mp4" id="videoplayer" class="w-100"></video>
+            <div class="w-100">
+              <video muted src="../assets/video/wait.mp4" class="" id="videoplayer" data-setup="{controls:true}" preload="auto"></video>
+            </div>
+            <button>play</button>
+            <button>pause</button>
             </div>
             <div class="row mb-3">
                 <h3>Viewers (<span id="membersCount"></span>)</h3>
@@ -69,7 +76,8 @@ <h3>Debug</h3>
     <!-- <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
     <script src="https://vjs.zencdn.net/7.2.3/video.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script> -->
+    <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
     <script>
 
     </script>

diff --git a/assets/css/flix.css b/assets/css/flix.css
@@ -53,6 +53,11 @@ body {
     cursor: pointer;
 }
 
+#videoplayer > video{
+    width: 100%;
+    height: 100%;
+}
+
 .progress-bar-container {
     position: relative;
     margin-top: 5px;

diff --git a/bundle.js b/bundle.js
@@ -26,35 +26,40 @@ var bingePack = {
 }
 
 
+
 function changeVideoSource(url){
-  videoplayer.src=url;
+  var player = videojs(videoplayer);
+  type = bingePack.type;
+  player.src({
+    src: url,
+    //  type: 'video/mp4'/*video type*/
+  });
+  player.fill(true)
+  player.play();
   // videoSource = document.createElement('source')
   // videoSource.src=url;
-  // // videoSource.type="application/x-mpegURL";
-  // videoSource.type="video/mp4";
+  // if(type=='m3u8'){
+  //   videoSource.type="application/x-mpegURL";
+  // //   if (Hls.isSupported()) {
+  // //   var video = document.getElementById('videoplayer');
+  // //   var hls = new Hls();
+  // //   hls.attachMedia(video);
+  // //   hls.loadSource(url);
+  // //   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+  // //     console.log('video and hls.js are now bound together !');
+  // //   });
+  // // }
+  // }else{
+  //   videoSource.type="video/mp4";
+  // }
+  // videoplayer.innerHTML='';
   // videoplayer.removeAttribute('src');
-  // videoplayer.setAttribute('loop',false);
   // videoplayer.appendChild(videoSource);
+
+
   videoplayer.load();
   bingePack.unset=false;
-  if (Hls.isSupported()) {
-    var video = document.getElementById('videoplayer');
-
-    // If you are using the ESM version of the library (hls.mjs), you
-    // should specify the "workerPath" config option here if you want
-    // web workers to be used. Note that bundlers (such as webpack)
-    // will likely use the ESM version by default.
 
-    var hls = new Hls();
-
-    // bind them together
-    hls.attachMedia(video);
-    hls.loadSource(url);
-    // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
-    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
-      console.log('video and hls.js are now bound together !');
-    });
-  }
 }
 
 // if(bingePack.srt){
@@ -484,6 +489,7 @@ try {
     pack = { ...bingePack }
     pack['video'] = url;
     pack['title'] = title;
+    pack['type'] = document.getElementById('VideoURLType').value;
     pack['desc'] = document.getElementById('VideoDesc').value;
     ping(pack,'forceBingePack')
     bingePack = pack;

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         <div class="row justify-content-center">
             <div class="col-md-6 text-center">   
 
-                <h1>BingeBud <span>v0.6.1</span></h1>
+                <h1>BingeBud <span>v0.6.3</span></h1>
                 <button class="button btn btn-primary" id="create-room">Create New Theatre</button>
 
                 <div class="mt-4" id="linkSection" style="display: none;">

diff --git a/play/index.html b/play/index.html
@@ -6,12 +6,13 @@
     <title>BingeBud | Elvis Tony</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="../assets/css/flix.css">
+    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
 </head>
 <body>
     <div class="start-container">
         <button class="start-button">Ready</button>
     </div>
-    <video src="../assets/video/wait.mp4" loop="true" autoplay class="video-background" id="videoplayer" >   </video>
+    <video src="../assets/video/wait.mp4" loop="true"  autoplay class="video-background" id="videoplayer" >   </video>
 
 
 
@@ -57,7 +58,9 @@ <h4 ><small>Code:</small> <span id="RoomCode" class="room-code"></span></h4>
 <script src="../assets/js/flixplayer.js"></script>
 <!-- <script src="/assets/js/script.js"></script> -->
 <script src="../bundle.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script> -->
+<script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
+
 <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> -->
 <script>