2017-08-28 10 views
2

HTML角度4のページの読み込みでhtml5ビデオの再生時間を取得するにはどうすればよいですか?

<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; 
} 

私は、ボタンのクリックで動画のURLを取得することができますが、私は、ページのロードに乗ることができません。

ページの読み込み時に動画を再生するにはどうすればよいですか?

プラス:私はgetDuration(v)は、パラメータを持っているので、ngOnInit()getDuration(v)関数を呼び出しますが、エラーを取得しようとしました。

ありがとうございました!

答えて

4
  1. 要素が読み込まれるまで待つ必要があります。代わりにngAfterViewInit()ライフサイクルフックを使用してください。ngOnInit()

  2. デコレータ@ViewChildを使用して、テンプレートの要素参照をタイプスクリプトロジックに使用します。

    あなたのケースでViewChildを使用して

@ViewChild('v') v; 

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

は、あなたの答えをいただき、ありがとうございます。しかし、私はViewChildのものを使用する方法を理解していないのですか?あなたはそれを使う方法についてもう少し詳しく知ることができますか? – Norx

+0

更新された回答を参照 – TheUnreal

+0

途中で** ElementRef **と連携しました。ただ言いたかった。 '@ViewChild( 'v')v:ElementRef;' 'this.getDuration(this.v.nativeElement)' – Norx

関連する問題