• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

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

2017年8月25日

  • このエントリーをはてなブックマークに追加

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

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

この記事の目次

  • 1 動画の自動での全画面(フルスクリーン)表示はできない!
  • 2 自動全画面(フルスクリーン)表示を実現する方法
    • 2.1 実現可能な実装仕様
    • 2.2 videoタグを全画面表示する
    • 2.3 動画を自動再生する
  • 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」タグになります。

1
2
3
4
5
<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を用意します。

CSS
1
2
3
4
5
6
7
8
9
10
<style>
#player {
position: absolute;
top:0;
width: 100%;
height: 100%;
background: #FFF;
z-index: 9999999999;
}
</style>

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

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

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

動画を自動再生する

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

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

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

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

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

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

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

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

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

その他のカスタマイズ

ここまでの内容をベースとして下記のようなカスタマイズも可能です。

  • 動画が再生されるまでの間、ローダー画像を表示させる
  • 動画再生中にスクロールされると嫌なのでスクロールバーを消す
  • スキップボタンを付ける
  • 動画の消えるのが早すぎるので、フェードアウトアニメーションを追加する

まとめ

動画の全画面表示というのは、求められる仕様によって難易度が変わります。

ぜひ「FullScreen API」の仕様で絶望された方は、ご紹介した方法で再度チャレンジしてみてください。

では、またー。

 


現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。

ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。

・ALAKIのWebシステム開発

・ALAKIのクラウド型受発注システム

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • PAK_PHPS9V9A6862_TP_V

    LaravelとTwigでアクティブページの判定をしよう!

    7 11月, 2018

  • 13993703_xxl

    PHPテンプレートエンジンのいろは

    10 6月, 2016

  • 13993703_xxl

    HTMLでPHPを動かしたいという無茶を言われた時に見るメモ

    20 5月, 2016

プログラマー募集
  • Next story RETINAディスプレイ対応!SVGの使い方からアニメーションまで徹底解説!
  • Previous story 欧文書体からタイポグラフィーを学ぶ Part.2

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

弊社サービス

MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。 広報活動の課題を数字で可視化し、出願者数アップをお手伝いします クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

人気の記事

  • woman-desk

    未分類

    リモートワークでインタビュー動画を撮影する際の5つのコツ

    3 2月, 2022

  • main-visual

    AR

    実務で使うWebARのチェックポイント

    10 12月, 2021

  • 5050691_s

    未分類

    Web制作の現場から、JavascriptやPHPの「デバッグ」について考える

    14 9月, 2021

  • スクリーンショット 2021-07-10 9.04.44

    未分類

    AR(WebAR)の導入事例をご紹介!〜EC × AR〜

    10 7月, 2021

  • アセット 1@2x-100

    AR

    AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

    25 6月, 2021

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

アーカイブ

  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • リモートワークでインタビュー動画を撮影する際の5つのコツ
  • 実務で使うWebARのチェックポイント
  • Web制作の現場から、JavascriptやPHPの「デバッグ」について考える
  • AR(WebAR)の導入事例をご紹介!〜EC × AR〜
  • AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

検索

ALAKI株式会社 © 2022. All Rights Reserved.