質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Q&A

0回答

274閲覧

ionicでビデオ画面をタップした時に、フルスクリーンにできない

dog57

総合スコア131

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

0グッド

1クリップ

投稿2019/06/27 02:02

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); } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問