インライン要素の動画をボタン一つでどの端末でも全画面再生にする方法【Fullscreen APIがきかない場合の対応】

8085 ワード
Video fullscreen Vue.js Video テキストリンク

こんにちは、Yuiです。

今回インライン要素で表示している動画を、ボタン一つで拡大再生させる方法について書きます。

背景

playsinlineを指定しているビデオタグに対して、クリックアクションで全画面再生をさせたい場面があり、Fullscreen APIを読むとそれぞれメソッドがブラウザごとに違うらしいので、条件分岐で対応しました。

また、公式ではIE非対応らしく書いているますが、どうやらIE11からサポートされたらしい（参考特定の要素を全画面(フルスクリーン)にするFullscreen API）ので、以下のように書きました。（IE10以前はもう知らん..）

<video ref="video" src="sample.mp4" playsinline />
<button @click="fullScreen">全画面再生</button>
<script>
export default {
  methods: {
    fullScreen() {
      const video = this.$refs.video;
      if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      } else if (video.requestFullscreen) {
        video.requestFullscreen();
      } else {
        alert("全画面再生できません。");
      }
    },
  },
};
</script>

ただ、これだとスマートフォン非対応なので、スマートフォン用のメソッドを追加する必要がありました。

解決策

アップルのドキュメントをしっかり読むと書いてました。
webkitEnterFullscreenというらしいです。
そこでこう書き換えて終わり。

<video ref="video" src="sample.mp4" playsinline />
<button @click="fullScreen">全画面再生</button>
<script>
export default {
  methods: {
    fullScreen() {
      const video = this.$refs.video;
      if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      } else if (video.webkitEnterFullscreen) {
        video.webkitEnterFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      } else if (video.requestFullscreen) {
        video.requestFullscreen();
      } else {
        alert("全画面再生できません。");
      }
    },
  },
};
</script>

Androidに関しては調べられなかったのですが、stack overflowでのこの質問と回答を読む限りAndroidでも動くっぽいですね〜。

感想

やむなしな気もしますが、条件分岐が多くて気持ち悪いですね。
他にもっと良い書き方あれば教えて下さい〜。