Wie kann ich html5 Videodauer beim Laden der Seite mit eckigen 4 erhalten?

Question

html

<video #v > 
    <source src="{{video.videoUrl}}" type="video/mp4" /> 
</video> 

<button (click)="getDuration(v)"> 
    Get Duration 
</button> 

<input type="range" step="0.1" min="0" 
    max="getDuration(v)"> 

.ts

video = { 
    videoUrl :"myvideo.mp4" 
    length: null, 
} 

getDuration(v){ 
    let dur = v.duration; 
    dur = dur.toFixed(); 

    this.video.length = dur; 
    return dur; 
} 

I Video-URL auf die Schaltfläche klicken, erhalten kann, aber ich kann nicht beim Laden der Seite bekommen.

Wie kann ich Videodauer erhalten, wenn Seite Video lädt?

Plus-: Ich versuchte getDuration(v) Funktion in ngOnInit() zu nennen, aber Fehler erhalten, weil getDuration(v) Parameter hat.

Vielen Dank!

Answer 1

1. Sie müssen warten, bis das Element geladen ist. Verwenden Sie stattdessen den ngAfterViewInit() Lifecycle-Hook ngOnInit().

2. Verwenden Sie den @ViewChild Dekorator, um die Elementreferenz aus der Vorlage in Ihrer Typoskriptlogik zu verwenden.

Mit ViewChild in Ihrem Fall:

@ViewChild('v') v; 

ngAfterViewInit() { 
console.log(this.v); 
}