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

2017年8月25日

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

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

この記事の目次

1 動画の自動での全画面（フルスクリーン）表示はできない！
2 自動全画面（フルスクリーン）表示を実現する方法
3 その他のカスタマイズ
4 まとめ
- 4.1 現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。

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

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

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

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>

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

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

<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>

$(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>