videoタグを使って自動全画面（フルスクリーン）に動画を表示させる方法

2017年8月25日

こんばんは、Webプログラマの篠田です。

今回は、Webブラウザ上で動画の自動全画面（フルスクリーン）表示をする方法をご紹介します。

動画の自動での全画面（フルスクリーン）表示はできない！

いきなり、タイトル否定をしているような内容となってしまいましたね。

動画の全画面（フルスクリーン）表示というと下記のようなコントロール部分にある「フルスクリーン」ボタンによるものを連想します。

blog_2096_1

この「フルスクリーン」ボタンは、JavaScriptの「FullScreen API」というものを実装することで実現することができます。

ネットで「動画　フルスクリーン JavaScript」と検索すると、だいたい「FullScreen API」を使った解説になります。

ですが、この「FullScreen API」は、今回の目的である「自動全画面表示」を実現することはできません。

「FullScreen API」は、セキュリティの観点から、ユーザーが自発的に行ったクリックイベントからでしか実行されないという仕様があります。

そのため、「$(“button”).click()」や直接「FullScreen API」を実行するようなプログラムは動かすことができません。

ですので、「フルスクリーン」ボタンによるディスプレイいっぱいでの、動画表示というのは完全自動では実装できないということになります。

自動全画面（フルスクリーン）表示を実現する方法

仕様でできないといわれてしまっては、そこで終了になってしまいます。

ここからは、どのように実装すれば自動全画面（フルスクリーン）表示を実現することができるのかをご紹介します。

実現可能な実装仕様

下記にこれからご紹介する自動全画面（フルスクリーン）表示の仕様をまとめます。

ブラウザの全画面に動画を表示させる。
動画が終れば、ページが表示される。

videoタグを全画面表示する

動画を再生させるために使用するのはHTML5の「video」タグになります。

<video id="player" preload>
	<source src="/_assets/movie/test.mp4" type="video/mp4">
	<source src="/_assets/movie/test.ogv" type="video/ogg">
	<source src="/_assets/movie/test.webm" type="video/webm">
</video>

次に、この「video」タグを全画面（フルスクリーン）表示にするためにCSSを用意します。

<style>
 #player {
 	position: absolute; 
 	top:0; 
 	width: 100%; 
 	height: 100%; 
 	background: #FFF; 
 	z-index: 9999999999;
 }
</style>

これで、videoタグの範囲がブラウザ全画面（フルスクリーン）に拡張されます。

「z-index」プロパティは、非常識なぐらい大きめにしておきましょう。チャットツールなどの外部ツールがサイト内にあると、背面にまわってしまうばあいがあるためです。

これで、全画面に対して動画の再生ができるようになります。

動画を自動再生する

全画面（フルスクリーン）にすることができれば、あとはjavaScriptを使って、動画を制御すればOKです。

<script>
$(function(){
	var player = $('#player').get(0);	//videoタグの要素を取得
	
	player.play();	//動画の再生
}
</script>

これで、自動再生が可能になります。

このままでは、動画が終わってもコンテンツが見えません。

ですので、動画が終わったらvideoタグを削除するという処理を追加します。

<script>
$(function(){
	var player = $('#player').get(0);	//videoタグの要素を取得
	
	player.play();	//動画の再生
	
	//動画が終了したことを検出して発火する処理
	player.addEventListener('ended',function() {
		$('#player').remove();	//videoタグをDOM的に削除
	});
}
</script>

videoタグの要素で「addEventListener」メソッドが使えます。

動画の再生が終わったことを知らせる「ended」を、「addEventListener」メソッドで捕まえて「video」タグを削除する処理を追加します。

これで、自動再生と再生終了後に自動的に閉じるという処理が実装できました。