Fix: play video

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -17,9 +17,9 @@
     "socket.io-client": "^4.7.5",
     "swiper": "^11.1.4",
     "vant": "^4.9.1",
-    "video.js": "^8.12.0",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "^3.4.21",
+    "vue-hls-video-player": "^1.0.1",
     "vue-router": "^4.0.13"
   },
   "devDependencies": {

src/assets/css/chunkVendor.css

@@ -8976,13 +8976,14 @@ button.swiper-pagination-bullet {
 .video-js.vjs-fill,
 .video-js .vjs-tech {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
+  height: 200px;
 }
 
 .video-js .vjs-tech {
-  position: absolute;
+  /* position: absolute;
   top: 0;
-  left: 0;
+  left: 0; */
 }
 
 body.vjs-full-window {

src/components/video/PlayVideo.vue

@@ -2,7 +2,13 @@
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 import { dataVideo } from "./index.js"
-import videojs from 'video.js';
+
+import { VideoPlayer } from 'vue-hls-video-player';
+
+function processPause(progress) {
+  console.log(progress)
+}
+
 
 export default {
   setup() {
@@ -24,7 +30,8 @@ export default {
       show,
       dataVideo
     };
-  }
+  },
+  components: { VideoPlayer }
 };
 
 </script>
@@ -49,13 +56,18 @@ export default {
         class="video-js noVip my-video-dimensions vjs-controls-enabled vjs-touch-enabled vjs-v7 vjs-has-started vjs-user-active vjs-paused"
         id="my-video"
       >
-        <video
-          id="my-video_html5_api"
-          class="vjs-tech"
-          preload="auto"
-          controls
-          :src="currentVideo.vod_play_url"
-        ></video>
+
+        <VideoPlayer
+            type="default"
+            @pause="processPause"
+            :previewImageLink="currentVideo.vod_pic"
+            :link="currentVideo.vod_play_url"
+            :progress="30"
+            :isMuted="false"
+            :isControls="true"
+            class="vjs-tech"
+            id="my-video_html5_api"
+        />
 
       </div>
     </div>
@@ -69,7 +81,7 @@ export default {
           <div><span>Xem thêm</span></div>
         </div>
         <div class="movie-list">
-          <div class="movie-play-item" v-for="vd in dataVideo">
+          <div class="movie-play-item" v-for="vd in dataVideo" :key="vd.id">
             <div>
               <img :src="vd.vod_pic" />
               <div>