install video js

src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html

@@ -168,7 +168,7 @@
       <section id="configuration">
         <div class="row mb-2">
           <div class="col-12">
-            <iframe
+            <!-- <iframe
               #videoIframe
               allowfullscreen
               frameBorder="0"
@@ -176,7 +176,12 @@
               [loading]="true"
               width="100%"
               style="height: 500px !important"
-            ></iframe>
+            ></iframe> -->
+
+
+            <video id="streamplayer" class="video-js vjs-big-play-centered" style="width: 100% !important; height: 500px !important">
+              <source src="#" type="application/x-mpegurl">
+            </video>
           </div>
         </div>
 
@@ -189,9 +194,7 @@
                   class="card-img-top img-fluid"
                   src="../../../../../assets/images/cctv.jpg"
                   alt="Image 1"
-                  (click)="onClick(item.videoUrl)"
+                  (click)="loadStream(item.videoUrl)"
-                  (mouseenter)="onMouseEnter(item)"
-                  (mouseleave)="onMouseLeave()"
                 />
               </div>
             </div>

src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts

@@ -26,12 +26,13 @@ export class SurveillanceComponent {
   public breadcrumb: any;
   showIframe = false;
   clicktrue = false;
+  
   cameras = [
     {
       id: 1,
       name: "Pengadilan Agama Padang Cam 1",
       videoUrl:
-        "https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939",
+        "https://wework-7-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cprg5g0d9fpsg3dvh27gSD1XjuVVd8h8oWqjoFJ6.m3u8?signInfo=C6fuX1l4syLFPeCPQ476iYDjNU_WZC24E6oGVwBvK3k6iIhqjvzzQIAAO5rUJjWLfeqY6YpDPsRB9JGEQTL_ZpxUOJB_L0VfgPX45SAecU_6_6ybAVcK-m0xxUrcGr3_EvzF_d1czqOHplNUMYodotvkWWQ9yP0NOEYJhtMemSw",
     },
     {
       id: 2,
@@ -53,6 +54,7 @@ export class SurveillanceComponent {
     },
   ];
 
+  player: any;
   constructor(
     private router: Router,
     private deviceService: DeviceService,
@@ -86,8 +88,27 @@ export class SurveillanceComponent {
   }
 
   ngAfterViewInit() {
-    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+    const options = {
-    //Add 'implements AfterViewInit' to the class.
+      controls: true,
+      preload: "none",
+      techOrder: ["html5"],
+      html5: {
+        hls: {
+          overrideNative: !videojs.browser.IS_SAFARI,
+        },
+      },
+    };
+
+    this.player = videojs("streamplayer", options);
+  }
+
+  loadStream(streamUrl) {
+    this.player.src({
+      type: "application/x-mpegURL",
+      src: streamUrl,
+    });
+    this.player.controls(true);
+    this.player.play();
   }
 
   fetchData(buildingSelected, categorySelected, statusSelected) {
@@ -132,28 +153,25 @@ export class SurveillanceComponent {
     }, 3000);
   }
 
-  onClick(videoUrl: string) {
+  // onClick(videoUrl: string) {
-    const iframe = this.videoIframe.nativeElement;
+  //   const iframe = this.videoIframe.nativeElement;
-    iframe.src = videoUrl;
+  //   iframe.src = videoUrl;
-    this.clicktrue = true;
+  //   this.clicktrue = true;
-  }
+  // }
 
-  onMouseEnter(camera: any) {
+  // onMouseEnter(camera: any) {
-    console.log("enter");
+  //   if (this.clicktrue === false) {
-    if (this.clicktrue === false) {
+  //     const iframe = this.videoIframe.nativeElement;
-      const iframe = this.videoIframe.nativeElement;
+  //     iframe.src = camera.videoUrl;
-      iframe.src = camera.videoUrl;
+  //   }
-    }
+  //   this.showIframe = true;
+  // }
 
-    this.showIframe = true;
+  // onMouseLeave() {
-  }
+  //   const iframe = this.videoIframe.nativeElement;
-
+  //   if (this.clicktrue === false) {
-  onMouseLeave() {
+  //     iframe.src = "";
-    console.log("leave");
+  //   }
-    const iframe = this.videoIframe.nativeElement;
+  //   this.showIframe = false;
-    if (this.clicktrue === false) {
+  // }
-      iframe.src = "";
-    }
-    this.showIframe = false;
-  }
 }

src/index.html

@@ -36,11 +36,15 @@
   <!-- <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> -->
   <!-- <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" /> -->
 
+  <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
+
+
 </head>
 
 <body class="vertical-layout 1-column blank-page pace-done menu-collapsed menu-hide vertical-overlay-menu" data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">
 
   <app-main></app-main>
+  <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
   <!-- <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script> -->
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.2/Youtube.min.js"></script> -->
 </body>