CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう

コントローラUIの設計

<video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。

Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用

再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。

コントローラのマークアップ

まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。

再生/一時停止ボタン
シークバー
タイマー
ボリューム調節ボタン/スライダ

これらを構成するマークアップは次のとおり。

<div class="ghinda-video-controls">
    <a class="ghinda-video-play" title="Play/Pause"></a>
    <div class="ghinda-video-seek"></div>
    <div class="ghinda-video-timer">00:00</div>
    <div class="ghinda-volume-box">
        <div class="ghinda-volume-slider"></div>
        <a class="ghinda-volume-button" title="Mute/Unmute"></a>
    </div>
</div>

それぞれのクラス名は次の機能に対応している。

ghinda-video-controls: コントローラ全体
ghinda-video-play: 再生/一時停止
ghinda-video-seek: シーク
ghinda-video-timer: タイマー
ghinda-volume-box: ボリューム調節のボタン。オンマウスでスライダとミュート切替を表示
ghinda-volume-slider: ボリューム調節スライダ
ghinda-volume-button: ミュート切替

JavaScriptを用いてこのマークアップ(controls wraper)を<video>要素の後に挿入、<div class="hinda-video-player">(main wrapper)で<video>要素をラップする。

作成したプレーヤをjQueryプラグインとしてパッケージ

JavaScriptによるマークアップが完了したら、これらをjQueryプラグインとしてパッケージする。jQueryプラグインにしておくことで、簡単に再利用することが可能になる。AUTHOR'S NOTEによると、jQueryプラグインを作成してみたい場合はSitePointのHow To Develop a jQuery PluginやOpera Developer Communityの39: Programming - the real basics!もチェックしてほしいとのことだ。

次に紹介するコードは、同氏の成果物である「jquery.ghindaVideoPlayer.js」の一部。実装を追いながら確認したい方は、さきに記事最下部の「download the source code (8.5mb, ZIP file)」からソースコードをダウンロードしておくことをおすすめする。

JavaScriptでおこなっている処理の順番は次のとおり。

デフォルトのオプション定義
<video>の前後にmain/controlsそれぞれの要素を挿入
再生/一時停止のコントローラを作成
シークの作成
タイマーの作成
ボリュームコントローラを作成
<video>からcontrols属性を削除

JavaScriptを無効にしている場合でもコントロールが無効になることがないように、スクリプトロードが完了し、コントローラの描画に成功した時点でコントロール属性を削除。JavaScriptが無効の環境や、なんらかの理由で1~6が実行できなかった場合は、Webブラウザデフォルトのコントローラがそのまま表示されるというわけだ。

$.fn.gVideo = function(options) {
    // build main options before element iteration
    var defaults = {
        theme: 'simpledark',
        childtheme: ''
    };
    var options = $.extend(defaults, options);
    // iterate and reformat each matched element
    return this.each(function() {
        var $gVideo = $(this);

        //create html structure
        //main wrapper
        var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
        //controls wraper
        var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>'); 
        $gVideo.wrap($video_wrap);
        $gVideo.after($video_controls);

さきほどのマークアップを<video>要素の前後に挿入する。

続いて、コントローラUIを構築する各要素を紐づける。

//get newly created elements
var $video_container = $gVideo.parent('.ghinda-video-player');
var $video_controls = $('.ghinda-video-controls', $video_container);
var $ghinda_play_btn = $('.ghinda-video-play', $video_container);
var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);
var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);
var $ghinda_volume = $('.ghinda-volume-slider', $video_container);
var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);

$video_controls.hide(); // keep the controls hidden

$video_controls.hide();でいったんコントローラを非表示にしている。これは動作を再生する準備ができるまで、コントローラを非表示にしておきたいため。

続いて、再生/一時停止のコントロールを作成する。

var gPlay = function() {
    if($gVideo.attr('paused') == false) {
        $gVideo[0].pause();                    
    } else {                    
        $gVideo[0].play();                
    }
};

$ghinda_play_btn.click(gPlay);
$gVideo.click(gPlay);

$gVideo.bind('play', function() {
    $ghinda_play_btn.addClass('ghinda-paused-button');
});

$gVideo.bind('pause', function() {
    $ghinda_play_btn.removeClass('ghinda-paused-button');
});

$gVideo.bind('ended', function() {
    $ghinda_play_btn.removeClass('ghinda-paused-button');
});

<video>をサポートするほとんどのWebブラウザは、プレーヤを右クリックするとコンテキストメニューに再生や一時停止といったコントロールのためのメニューを表示する。コンテキストメニューから操作されても自前で用意したコントローラUIが連動して動作するように、ここでは「ボタンに機能を紐づける」のとは別に、「<video>の各種イベント(play, pause, ended)時に、ボタンのクラスを操作」している。

再生/一時停止のコントロールの後、シークの作成にうつる。

 var createSeek = function() {
    if($gVideo.attr('readyState')) {
        var video_duration = $gVideo.attr('duration');
        $ghinda_video_seek.slider({
            value: 0,
            step: 0.01,
            orientation: "horizontal",
            range: "min",
            max: video_duration,
            animate: true,                    
            slide: function(){                            
                seeksliding = true;
            },
            stop:function(e,ui){
                seeksliding = false;                        
                $gVideo.attr("currentTime",ui.value);
            }
        });
        $video_controls.show();                    
    } else {
        setTimeout(createSeek, 150);
    }
};

createSeek();

createSeek()は再帰関数。readyState属性の有無をチェックし、再生準備ができたらjQuery UI Sliderを使ってスライダを描画。スライダ描画後、非表示にしていたコントロールを再表示する。

続いてタイマーを作成し、timeupdateイベントリスナにアタッチする。

var gTimeFormat=function(seconds){
    var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
    var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
    return m+":"+s;
};

var seekUpdate = function() {
    var currenttime = $gVideo.attr('currentTime');
    if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
    $ghinda_video_timer.text(gTimeFormat(currenttime));                            
};

$gVideo.bind('timeupdate', seekUpdate);

gTimeFormatは時間の書式を整形するための関数。seekUpdateはさきほど作成したスライダの値を取得し、現在再生している動画の時間を得るための関数。timeupdateイベントリスナにseekUpdateをアタッチし、スライダを移動させてcurrentTimeの値が変動したときに再生時間を取得。gTimeFormatで時間書式を変換し、タイマー部分に表示する。

ここまできたらコントローラ最後のUI、ボリュームコントローラを作成する。

$ghinda_volume.slider({
    value: 1,
    orientation: "vertical",
    range: "min",
    max: 1,
    step: 0.05,
    animate: true,
    slide:function(e,ui){
        $gVideo.attr('muted',false);
        video_volume = ui.value;
        $gVideo.attr('volume',ui.value);
    }
});

var muteVolume = function() {
    if($gVideo.attr('muted')==true) {
        $gVideo.attr('muted', false);
        $ghinda_volume.slider('value', video_volume);

        $ghinda_volume_btn.removeClass('ghinda-volume-mute');                    
    } else {
        $gVideo.attr('muted', true);
        $ghinda_volume.slider('value', '0');

        $ghinda_volume_btn.addClass('ghinda-volume-mute');
    };
};

$ghinda_volume_btn.click(muteVolume);

シーク同様、jQuery UI Sliderでボリュームコントローラを実装している。スライダが動いた場合はvolumeをリアルタイムに変更。またmuteVolumeでミュートのOn/Offを切り替えられるようになっている。

最後にWebブラウザのデフォルトコントローラの代わりに、カスタマイズしたコントローラが使用されるように、<video>からcontrols属性を削除する。