77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
|
|
import Hls from 'hls.js';
|
|
|
|
@Component({
|
|
selector: 'app-video-player',
|
|
standalone: true,
|
|
templateUrl: './video-player.component.html',
|
|
styleUrls: ['./video-player.component.scss'],
|
|
})
|
|
export class VideoPlayerComponent implements OnInit, OnDestroy {
|
|
@Input() playMovie: string = '';
|
|
private hls: Hls | null = null;
|
|
private videoElement: HTMLVideoElement | null = null;
|
|
private resolutionUrls: { [key: string]: string } = {};
|
|
|
|
constructor(private elementRef: ElementRef) {}
|
|
|
|
ngOnInit(): void {
|
|
this.videoElement = this.elementRef.nativeElement.querySelector(
|
|
'video'
|
|
) as HTMLVideoElement;
|
|
|
|
if (this.playMovie) {
|
|
this.resolutionUrls = {
|
|
'360p': `${this.playMovie}_360p.m3u8`,
|
|
'720p': `${this.playMovie}_720p.m3u8`,
|
|
'1080p': `${this.playMovie}_1080p.m3u8`,
|
|
};
|
|
|
|
if (Hls.isSupported() && this.videoElement) {
|
|
this.hls = new Hls();
|
|
this.hls.loadSource(this.resolutionUrls['720p']); // Default resolution
|
|
this.hls.attachMedia(this.videoElement);
|
|
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
this.videoElement?.play();
|
|
});
|
|
} else if (
|
|
this.videoElement.canPlayType('application/vnd.apple.mpegurl')
|
|
) {
|
|
this.videoElement.src = this.resolutionUrls['720p']; // Default resolution
|
|
this.videoElement.addEventListener('canplay', () => {
|
|
this.videoElement?.play();
|
|
});
|
|
}
|
|
|
|
this.updateScreenDimensions();
|
|
} else {
|
|
console.error('playMovie is not set.');
|
|
}
|
|
}
|
|
|
|
private updateScreenDimensions() {
|
|
if (this.videoElement) {
|
|
this.videoElement.style.width = `${window.innerWidth}px`;
|
|
this.videoElement.style.height = `${window.innerHeight}px`;
|
|
}
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
if (this.hls) {
|
|
this.hls.destroy();
|
|
}
|
|
}
|
|
|
|
public switchResolution(resolution: '360p' | '720p' | '1080p') {
|
|
if (this.resolutionUrls[resolution]) {
|
|
if (this.hls) {
|
|
this.hls.loadSource(this.resolutionUrls[resolution]);
|
|
this.hls.attachMedia(this.videoElement!);
|
|
} else if (this.videoElement) {
|
|
this.videoElement.src = this.resolutionUrls[resolution];
|
|
}
|
|
} else {
|
|
console.error(`Resolution URL for ${resolution} not found.`);
|
|
}
|
|
}
|
|
}
|