All files / src/app/components/videos videos.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
 
 
 
 
 
 
 
37x
 
 
 
 
2x
2x
 
2x
2x
 
 
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
import { Component, ViewChild, OnInit, ElementRef, OnDestroy} from '@angular/core';
import Hls from 'hls.js';
 
@Component({
  selector: 'app-videos',
  imports: [],
  templateUrl: './videos.component.html',
  styleUrl: './videos.component.css'
})
export class VideosComponent implements OnInit, OnDestroy {
  @ViewChild('videoPlayer', { static: true }) videoPlayerRef: ElementRef;
  hls!: Hls;
 
  ngOnInit(): void {
    const video = this.videoPlayerRef.nativeElement;
    const hlsUrl = window.location.protocol+"//"+window.location.hostname.toLowerCase()+':8888/live/index.m3u8';
 
    Eif(Hls.isSupported()) {
      this.hls = new Hls({
        liveSyncDurationCount: 10
      });
      this.hls.loadSource(hlsUrl);
      this.hls.attachMedia(video);
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    }
    else if(video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = hlsUrl;
      video.addEventListener('loadmetadata', () => {
        video.play();
      });
    }
  }
  ngOnDestroy(): void {
    this.hls.destroy();
  }
}