2017-04-18 67 views
2

我是angular2的新手,我一直試圖訪問組件內的html5視頻標籤。雖然我使用@ViewChild裝飾器來訪問視頻標籤,但我無法訪問播放和暫停功能。 我player.html文件Angular 2:在組件中訪問播放和暫停html5視頻標籤

<video id="thisVideo" #videoplayer *ngIf="openPlayer" controls autoplay="autoplay" preload="auto" [poster]="src.thumbnailUrlHighRes" width="640"> 
 
<source [src]="src.videoURL" type="video/mp4" /> 
 
<p>Your browser does not support the video tag.</p> 
 
</video>

視頻的自動播放設置爲真實的。我需要發揮和使用空格鍵暫停視頻,爲此我已經添加事件偵聽器的主機組件。但問題是我無法訪問視頻標籤的播放和暫停事件監聽器中的功能。 有人能給我一些見解嗎?

回答

0

我得到了它這個工作:

@HostListener('document:keyup', ['$event']) 
    onKeyUp(ev:KeyboardEvent) { 
    if(ev.code == "Space") { 
     let vid = <HTMLVideoElement>document.getElementById("thisVideo"); 
     if(vid.paused) { 
     vid.play(); 
     } 
     else { 
     vid.pause(); 
     } 
    } 
    } 
+0

謝謝傑克。 – Aeverlite