HTML-Video-Element Vollbild

Question

Gibt es in Angular 2 eine Möglichkeit, ein Video im Vollbildmodus einmal per Tastendruck zu machen?

Dies ist die Funktion, die ich bisher versucht habe. (Beachten Sie, dass Pausieren und Spielen funktioniert.)

fullscreen(video){ 
     video.requestFullscreen(); 
    } 

HTML-Code

<video #video autoplay> 
    <source src="assets/videos/mov_bbb.mp4" type="video/mp4"> 
    <img alt = "Test image" src="/assets/images/example.png" title="Your browser does not support the <video> tag"> 
    </video> 
<button (click)="fullscreen(video);"> Fullscreen </button> 

Answer 1

Nach meinem Kommentar, was Sie tun können (und im Anschluss an diese already answered topic) ist so etwas wie dieses

@ViewChild('video') video: ElementRef; 

toFullScreen() { 
    let elem = this.video.nativeElement as HTMLVideoElement; 
    if (elem.requestFullscreen) { 
    elem.requestFullscreen(); 
    } else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen(); 
    } else if (elem.webkitRequestFullscreen) { 
    elem.webkitRequestFullscreen(); 
    } 
} 

Answer 2

Browser haben die Unterstützung für die fullScreen API noch nicht weitgehend übernommen. Obwohl Ihr Code in Ordnung ist, wird er sich in einigen Situationen nicht wie erwartet verhalten.

Wenn diese Funktion für Ihre App wichtig ist, empfehle ich die Verwendung der FScreen polyfill, die von Mozilla empfohlen wird.

1. NPM installieren Fscreen
2. Import in Ihre Komponente
3. Ändern Sie bitte Ihre fullScreen() Methode, es zu benutzen:

_

fullscreen(video){ 
    if(fscreen.fullscreenEnabled) { 
     fscreen.requestFullscreen(video); 
    } else {console.error('fullscreen is not supported');} 
} 

Wenn Sie wollen nicht vorstellen Abhängigkeit von einem Drittanbieter, müssen Sie möglicherweise die verschiedenen Präfixe verwenden, die Browser erwarten. See the docs oder anpassen @ trichetriche Antwort