IONICフレームワークを使用してハイブリッドアプリを開発しています。
videojsとrequestfullscreenメソッドを使ってビデオスクリーンをタップしたときにフルスクリーンにしたいです。 Webでは、requestfullscreenメソッドを使用してビデオ画面をタップすると全画面表示になります。 Androidデバイスでは、ボタンをタップしてもフルスクリーンになりましたが、ビデオ画面をタップしてもまったく応答せず、エラーも発生しません。なぜアンドロイドではビデオスクリーンをタップしても反応がないのですか?(iphoneではまだ試していません)
home.html
<ion-header> <ion-toolbar> <ion-title> player test 777 </ion-title> </ion-toolbar> </ion-header> <link href="/assets/css/video-js.css" rel="stylesheet" /> <ion-content> <div class="ion-padding"> <label ><video #myvid id="videoPlayer" class="video-js vjs-big-play-centered" controls preload="none" width="640" height="264" data-setup="{}" (click)="onClick($event)" > <source src="/assets/BigBuckBunny.mp4" type="video/mp4" /></video ></label> <ion-button class="screenmode-change__btn" (click)="ChangeFullScreen()"> 全画面モード </ion-button> </ion-content>
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 implements AfterViewInit { 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!"); } ); } ChangeFullScreen(event) { if (this.vid.nativeElement.requestFullscreen) { this.vid.nativeElement.requestFullscreen(); } } onClick(error: any) { // もしフルスクリーンにできれば(表示が可能か否) if (this.vid.nativeElement.requestFullscreen) { this.vid.nativeElement.requestFullscreen(); console.log("fullscreen success"); } else { console.log("fullscreen con not success"); console.log(error); } } }
あなたの回答
tips
プレビュー