Angular筆記——媒體播放

視頻播放

<video src="../../../assets/restart3.mp4" id="video3" *ngIf="playVideo3" class="video" autoplay controls></video>

音頻播放

<audio src="../../../assets/time.mp3" id="musicTime"></audio>

其中，autoplay表示視頻加載完成自動播放,controls顯示播放按鈕等工具欄,loop循環播放

ts

import { ElementRef } from '@angular/core'; //加載組件

public element: ElementRef;
constructor(element: ElementRef) {
    this.element = element; //綁定element
}

// 在方法中
this.element.nativeElement.querySelector('#bgmusic').play(); // 經過id的方式，選擇哪個媒體播放
this.element.nativeElement.querySelector('#bgmusic').pause(); // 中止