web-dev-qa-db-ja.com

Angular 2 TypescriptからHTML 5ビデオを再生する

ユーザーがビデオ領域自体をクリックしたときに、TypeScriptからプログラムでHTMLビデオの再生を開始したい。

これは私のHTMLコードです：

_<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
    <source src="{{videoSource}}" type="video/mp4" />
    Browser not supported
</video>
</div>
_

これは私のTypeScriptコードです：

_@ViewChild('videoPlayer') videoplayer: any;

toggleVideo(event: any) {
    this.videoplayer.play();
}
_

問題は、play()関数が定義されていない/存在するというエラーが表示されることです。ここの間違いは何ですか？

html5angularangular2-template
15
SoundStage

問題は、videoを使用してid要素への参照を取得しようとしていることです。代わりにtemplate reference variable（_#_）を使用する必要があります：

_<div class="video">
    <video controls (click)="toggleVideo()" #videoPlayer>
        <source src="{{videoSource}}" type="video/mp4" />
        Browser not supported
    </video>
</div>
_

テンプレート参照変数の詳細については、こちらをご覧ください こちら 。

編集：

また、toggleVideo(event: any)関数では、nativeElementを取得し、play()関数を呼び出す必要があります。これは、DOM要素に直接アクセスしているためです。

_@ViewChild('videoPlayer') videoplayer: ElementRef;

toggleVideo(event: any) {
    this.videoplayer.nativeElement.play();
}
_

これに対する@peeskilletのクレジット。

42
Stefan Svrkota

他の人はすでに基本的な質問に答えています（nativeElementを使用する必要があります）。ただし、nativeElementはany型であるため、より特定の要素型に 'キャスト'する必要があります（<video>タグはHTMLVideoElement）です。

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

これにより、サポートされているすべてのメソッドとプロパティのインテリセンスが得られます。

そしてもちろん、これはすべてコンパイル時間です-何も変換していないので、要素が実際にビデオでない場合でもエラーが発生します。

4
Simon_Weaver

型の安全のためにvideoPlayer変数を使用してHTMLVideoElementを使用する別の方法を次に示します。

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) {
    this.videoPlayer = el.nativeElement;
  }

toggleVideo(event: any) {
    this.videoplayer.play();
}
1
brijmcq

複数のビデオを再生していて、すべてのビデオに同じビデオタ​​グを使用する場合、ビデオの再生に使用されている関数呼び出しを遅らせることができます。

setTimeout(() => {
    this.yourfunction();
}, 2000) //here delaying for two seconds, you can delay for any time.
0
Adnan Sheikh
<div class="col-md-9" style="padding-right:0">
            <video style="width: 100%;height: fit-content;" controls="controls" #videoPlayer
                src="http://localhost:3001/api/v1.0/media/{{movieId}}/stream">
            </video>

        </div>

#videoPlayerおよびcontrols = "controlsは、さらにカスタマイズするためのビデオ再生機能を提供します clickhere を参照してください。

0
anirudh aitha