要素をフルスクリーンで表示する

2015.09.27

Full Screen API を試してみたので使い方をメモ。

対応ブラウザ

Full Screen APIの対応ブラウザはこちら。
IEは11から対応で、それ以外で対応しているものでもベンダープレフィックスが必要になります。
スマホの場合はほぼ使用できません。

it-displays-the-elements-in-full-screen01

　

サンプルコード

今回は#video-areaをフルスクリーンにしてみます。

HTML

1
2
3
4
5
6
7
8
9
<div id="video-area">
    <video id="video" width="480" height="270" controls>
        <source src="./movie.mp4" type="video/mp4" />
    </video>
    <div id="control">
        <button id="full">FullScreen</button>
        <button id="exit">Exit</button>
    </div>
</div>

CSS

フルスクリーン時は、:fullscreenという疑似クラスでスタイルを指定できます。
ベンダープレフィックスを付けて以下のように指定します。

  • :-ms-fullscreen
  • :-webkit-full-screen
  • :-moz-full-screen
  • :fullscreen

webkitとmozでは間に「-」が入って「full-screen」となるので注意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#video-area {
    position: relative;
}
#control {
    position: absolute;
    top: 5px;
    left: 5px;
}
#control #exit {
    display: none;
}
 
#video-area:-webkit-full-screen #video {
    width: 100%;
    height: auto;
}
#video-area:-moz-full-screen #video {
    width: 100%;
    height: auto;
}
#video-area:-ms-fullscreen #video {
    width: 100%;
    height: auto;
}
#video-area:fullscreen #video {
    width: 100%;
    height: auto;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// videoの取得
var varea = document.getElementById('video-area');
var video = document.getElementById('video');
// 自動再生
video.autoplay = true;
// ループ
video.loop = true;
 
var full = document.getElementById('full');
var exit = document.getElementById('exit');
 
// FullScreenに対応しているか確認
if(!(document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled || document.fullscreenEnabled)) {
    // 対応していない場合はボタン非表示
    full.style.display = 'none';
}
 
// fullボタンを押した時
full.addEventListener('click', function () {
    if(document.fullscreenEnabled) {
        varea.requestFullscreen()
    } else if(document.webkitFullscreenEnabled) {
        varea.webkitRequestFullscreen()
    } else if(document.mozFullScreenEnabled) {
        varea.mozRequestFullScreen();
    } else if(document.msFullscreenEnabled) {
        varea.msRequestFullscreen();
    } else {
        console.log('error!');
    }
 
    // ボタン表示の切り替え
    exit.style.display = 'block';
    full.style.display = 'none';
});
 
 
// exitボタンを押した時
exit.addEventListener('click', function () {
    if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    //
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    //
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    //
    } else if (document.exitFullscreen) {
        document.exitFullscreen();
    }
 
    // ボタン表示の切り替え
    exit.style.display = 'none';
    full.style.display = 'block';
});

Full Screen APIのデモページ

document.fullscreenEnabled Full Screen APIが使用できる場合はtrueを返す。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
document.webkitFullscreenEnabled
document.msFullscreenEnabled
document.mozFullScreenEnabled
document.fullscreenEnabled
mozでは「FullScreenEnabled」とsが大文字になっているので注意。
element.requestFullScreen() 指定した要素をフルスクリーンで表示する。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
element.webkitRequestFullScreen();
element.mozRequestFullScreen();
element.msRequestFullScreen();
element.requestFullScreen();
document.exitFullscreen(); フルスクリーン表示を終了する。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
document.webkitCancelFullScreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
webkitとmozでは「cancelFullScreen」となるので注意。

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031