JavaScriptとhtmlを利用してフルスクリーン機能を実装する

実は、自分の作ったサービスに初めて会員登録をしてくれて、たくさんの意見をいただきました。その中でも動画のフルスクリーン機能が欲しいという要望があったので、フルスクリーンの実装について忘れないようにメモとして残しておきます。これを参考にするとフルスクリーンにして欲しいところを設定できるようになります。

自作した動画投稿サイトには動画オプションは、動画のダウンロードなどの動画の盗用を防ぐため、ブラウザごとの動画メニューの非表示や右クリックを押しても何も反応しないようにしている。そのため動画の操作は、こちらで作った属性しか動作できないようにしている。フルスクリーンを実装する
ためにはhtmlとJavaScriptを使って組まなければいけない。

htmlでボタンの作成

以下のコードを使ってフルスクリーン用のボタンを実装します　<bottom>ではなくbootstrapを利用しているのは、bootstrapのほうがデザインの自由度が高いためです。

<div id="Full" class="btn ban-info">Full</div> 

こうすることでフルスクリーン用のボタンを作成できました。しかし、この状態ではただのボタンですので、押しても何も反応しません。次にJavascriptを使って、フルスクリーンを実装していきます。

JavaScriptでフルスクリーン

ボタン押して動画をフルスクリーンに実装していく方法は以下の方法になる。

<script type="text/javascript">
    // 匿名関数内で実行
    (function (){
    
      // ------------------------------------------------------------
      // 属性をフルスクリーン表示する関数
      // ------------------------------------------------------------
      function ElementRequestFullscreen(element){
        var list = [
          "requestFullscreen",
          "webkitRequestFullScreen",//chrome, safariに反応する
          "mozRequestFullScreen",//firefoxに反応する
          "msRequestFullscreen"
        ];
        var i;
        var num = list.length;
        for(i=0;i < num;i++){
          if(element[list[i]]){
            element[list[i]]();
            return true;
          }
        }
        return false;
      }
    
      // ------------------------------------------------------------
      // フルスクリーンを終了する関数
      // ------------------------------------------------------------
      function DocumentExitFullscreen(document_obj){
        var list = [
          "exitFullscreen",
          "webkitExitFullscreen",
          "mozCancelFullScreen",
          "msExitFullscreen"
        ];
        var i;
        var num = list.length;
        for(i=0;i < num;i++){
          if(document_obj[list[i]]){
            document_obj[list[i]]();
            return true;
          }
        }
        return false;
      }
    
      var button_request = document.getElementById("Full");
      var element_container = document.getElementById("video");
    
      // ------------------------------------------------------------
      // イベントリスナーに対応している
      // ------------------------------------------------------------
      if(window.addEventListener){
    
        // ------------------------------------------------------------
        // リクエストボタンをクリックすると実行されるイベント
        // ------------------------------------------------------------
        button_request.addEventListener("click",function (e){
    
          // エレメントをフルスクリーン表示する
          ElementRequestFullscreen(element_container);
    
        });
    
        // ------------------------------------------------------------
        // イグジットボタンをクリックすると実行されるイベント
        // ------------------------------------------------------------
        button_exit.addEventListener("click",function (e){
    
          // フルスクリーンを終了する
          DocumentExitFullscreen(document);
    
        });
      }
    
    })();
    //-->
    </script>

実際にやってみるとこんな感じになる

ブラウザごとの動画メニューが出てきてしまいますが無事作成することができました。次は、フルスクリーン内でオリジナルの動画メニューを作成していきたいと思います。

宣伝！

現在、動画クリエイターが作った動画を料金を払って宣伝すると動画クリエイターだけでなく使用した素材の開発者にも利益が分配される動画投稿サイトForbindeのベータ版を公開しています。もしご興味がありましたら、是非アクセスして動画投稿等の意見、ご要望がございましたら　ここが使いにくいとかあったらcontactやTwitterに言っていただければ幸いです。

URL: https://www.forbinde.net/

https://twitter.com/Trum_028