htmlのvideタグで動画をフルスクリーン⇔フルスクリーン解除したい

Question

angularでvideojsを使い動画を表示させています。
動画をタップした際にフルスクリーン表示にし、もう一度タップしたらフルスクリーンを解除したいです。
最初の動画をタップした際のフルスクリーン表示はできているのですが、フルスクリーンの解除ができません。

どなたかご教示いただけないでしょうか。

home.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      player test123
    </ion-title>
  </ion-toolbar>
</ion-header>
<link href="/assets/css/video-js.css" rel="stylesheet" />

<ion-content>
  <div class="ion-padding">
    <video
      #myvid
      id="videoPlayer"
      class="video-js vjs-big-play-centered"
      controls
      preload="none"
      width="640"
      height="264"
      data-setup="{}"
      (click)="onClick()"
    >
      <source src="/assets/BigBuckBunny.mp4" type="video/mp4" />
    </video>
    </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 {
  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("フルスクリーンのキャンセル成功");
    }
  }
}
  
  

Answer 1

とりあえずchromeのdevtoolなどを使って、以下のブロックにbreak pointを貼って、どこまで実行されているか、(document.exitFullscreenの中身がどうなっているか)確かめてみるのが良いかと思いますが、

    } else if (document.exitFullscreen) {
      document.exitFullscreen();
      console.log("フルスクリーンのキャンセル成功");
    }

雑にググると以下のようなStack OverFlowの質問があり、ブラウザごとに場合分けするコードが紹介されています。一度こちらを試してみてもよいのではないでしょうか？

How to exit fullscreen onclick using Javascript?

        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

Comments

[dog57]

中身の確認の仕方もgoogleのdeveloperツールでできますか？

[KuwabataK]

webpackの設定にもよりますが、sourcemapを吐き出す設定にしているのであれば、devtoolのsourceタブの中で、home.tsを直接見る事ができ、ブレークポイントを貼ることもできます。

「chrome devtool 使い方」などでググれば情報は出てくると思います。

ただ、使い方がわからないのであれば、onClick()の先頭で`console.log(document.exitFullscreen)`とか書いて確かめても、とりあえずは良いと思います。