【javascript】fullscreenAPIでフルスクリーン対応してみたので使い方メモ

特定の要素をフルスクリーンにしてくれるAPI
ただ端末によってできたりできなかったりなので対応可否で処理を分ける必要あり。
ちなみにiOSは使えなかった。

今回使ってみてまぁよく使いそうと思ったのは以下らへん
・requestFullscreen
指定した要素をフルスクリーンにする

・cancelFullScreen
フルスクリーン解除

・fullscreenchangeイベント
フルスクリーンにしたときと解除したときに発生するイベント。

フルスクリーンにする

function startFullScreen(elm) {
    if (elm.webkitRequestFullscreen) {
        elm.webkitRequestFullscreen();
    } else if (elm.mozRequestFullScreen) {
        elm.mozRequestFullScreen();
    } else if (elm.msRequestFullscreen) {
        elm.msRequestFullscreen();
    } else if (elm.requestFullscreen) {
        elm.requestFullscreen();
    } else {
        return;
    }
}

フルスクリーン解除

function endFullScreen() {
    if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if(document.cancelFullScreen) {
        document.cancelFullScreen();
    } else if(document.exitFullscreen) {
       document.exitFullscreen();
   }
}

フルスクリーンの変更監視

var trrigerFullscreenChange = function() {
    // do something・・・
}
document.addEventListener("webkitfullscreenchange", trrigerFullscreenChange);
document.addEventListener("fullscreenchange", trrigerFullscreenChange);
document.addEventListener("mozfullscreenchange", trrigerFullscreenChange);
document.addEventListener("msfullscreenchange", trrigerFullscreenChange);

以上です