angularでvideojsを使い動画を表示させています。
動画をタップした際にフルスクリーン表示にし、もう一度タップしたらフルスクリーンを解除したいです。
最初の動画をタップした際のフルスクリーン表示はできているのですが、フルスクリーンの解除ができません。
どなたかご教示いただけないでしょうか。
home.html
html
1 2<ion-header> 3 <ion-toolbar> 4 <ion-title> 5 player test123 6 </ion-title> 7 </ion-toolbar> 8</ion-header> 9<link href="/assets/css/video-js.css" rel="stylesheet" /> 10 11<ion-content> 12 <div class="ion-padding"> 13 <video 14 #myvid 15 id="videoPlayer" 16 class="video-js vjs-big-play-centered" 17 controls 18 preload="none" 19 width="640" 20 height="264" 21 data-setup="{}" 22 (click)="onClick()" 23 > 24 <source src="/assets/BigBuckBunny.mp4" type="video/mp4" /> 25 </video> 26 </ion-content> 27
home.page.ts
import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core"; declare let videojs: any; @Component({ selector: "app-home", templateUrl: "home.page.html", styleUrls: ["home.page.scss"] }) export class HomePage { constructor() {} vidObj: any; @ViewChild("myvid") vid: ElementRef; // videoタグのオプション ngAfterViewInit() { const options = { controls: true, autoplay: false, preload: "auto", techOrder: ["html5"], controlBar: { currentTimeDisplay: true, volumePanel: false, muteToggle: false, fullscreenToggle: false } }; this.vidObj = new videojs( this.vid.nativeElement, options, function onPlayerReady() { videojs.log("Your player is ready!"); } ); } onClick() { if (this.vid.nativeElement.requestFullscreen) { this.vid.nativeElement.requestFullscreen(); console.log("フルスクリーンの成功"); } else if (document.exitFullscreen) { document.exitFullscreen(); console.log("フルスクリーンのキャンセル成功"); } } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/25 01:08
2019/06/25 02:33