2015 07 13

videoタグでiPadでもyoutubeのように全画面再生する

はじめに

これをためしたのが、表示するデバイスが限定される(iPad)条件付だったのでiPadでしかちゃんと確認してません。 iPhoneでも見た感じちゃんと見れると思います。
androidは不明。

やりたいこと

通常、videoタグは再生用のフレームがあって、poster画像が設定してあって、そこでcontrolが表示されていれば再生ができて。
というものだと思うけれど、ボタンをクリックしたら全画面に動画が広がって、自動で再生される。といったものを作りたい。
jquery使用。

フレームを非表示にして、ボタン押したら全画面再生

とりあえず、フレームを見えないようにしておきたいので、videoタグのwidth,heightを0にしたら表示されなくなった。
そして、再生用のボタンを押した時に、該当のvideoタグへのフルスクリーンと再生のイベントを発火。
これで、全画面表示で動画が再生されるはず。

html

<a class="btn-video" href="#movie01">動画再生</a>
<video controls="controls" id="movie01" width="0" height="0" onclick="this.play()">
    <source src="hogehoge.mp4">
</video>

js

var $videoBtn = $('.btn-video');
$videoBtn.on('click', function(e){
    e.preventDefault();
    var $target = $($(this).attr('href'));

    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        $target[0].currentTime = 0; // 常に最初から再生
        $target[0].play();
        if (!!$target[0].requestFullScreen) {
            $target[0].requestFullScreen();
        } else if (!!$target[0].webkitRequestFullScreen) {
            $target[0].webkitRequestFullScreen();
        } else if (!!$target[0].webkitEnterFullscreen) {
            $target[0].webkitEnterFullscreen();
        }
    }
    return false;
});

これはコンテンツの性格にもよるだろうけど、フルスクリーンを抜けた時にどこで止まったかフレームがないので見た目上わからないのと、その他の案件的な条件を考えて、今回は毎回最初から再生するようにした。

フルスクリーンを抜けた時に動画を停止

それで止めようとおもって、左上の「完了」ボタンを押すと、それはフルスクリーンから抜けるためのボタンだから、動画自体は停止されない。

今回は、フレームは表示せずボタンを押して全画面表示という仕様だから、フルスクリーンから抜けたら見た目的には何も動画は表示されていない状態になるんだけど、サイズ0の動画がまだ再生されていて、音が流れている状態。

だからこのボタンを押した時、もしくはフルスクリーンから抜けた時に、動画を停止しないといけない。
フルスクリーンモードに入った/抜けたイベントを取得するには以下。
http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events

js

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    if(event === 'FullscreenOff') {
        this.pause();
    }
});

その他の調整

あとは、動画を最後まで再生したらフルスクリーンを抜けるようにした。

js

$('video').bind("ended", function(e){
    if (!!this.exitFullscreen) {
        this.exitFullscreen();
    } else if (!!this.webkitExitFullscreen) {
        this.webkitExitFullscreen();
    } else if (!!this.mozCancelFullscreen) {
        this.mozCancelFullscreen();
    }
});

注意

ただ、開発当時の最新のiOS8.3にあげないとフルスクリーン再生がされなかったということがあった。(8.2ではボタンを押しても再生されなかった)

使用するデバイスが限定されるコンテンツで、かつ実際に使用するデバイスを直接触れて、バージョンアップも問題ないとのことだったのでなんとかなったけど、そのまま通常コンテンツに使うには、もうちょっとフォールバックなりを丁寧にしてあげないといけないなという感じがした。