このページの本文へ

HTML5 videoとjQuery UIでパノラマ動画プレーヤー (2/3)

2010年04月05日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

スライダーで視点を変更する

 続いて、スライダーを使って視点を変更できるようにします。スライダーを自前で作るのは手間がかかりますので、ここではjQuery UIのスライダーウィジェットを利用します。

●jQuery UI
 http://jqueryui.com/

【図24】

jQuery UI

 jQuery UIのスライダーウィジェットは次のような手順で利用できます。まず、HTMLに<div id="slider"></div>のようなスライダーを表示するコンテナを用意します。次に、JavaScriptで$("#slider").slider(オプション)としてスライダーを生成します。引数には表示オプションを指定します。

 今回のサンプルは、2つの動画を横に並べていますので、スライダーの最小値(min)は0に、最大値(max)は動画2つ分の横幅から表示領域の横幅を引いた値(1280×2-320)に設定します。

 また、スライダーの初期値(デフォルトで表示される視点)を設定しないと、後ろ向きの視点で動画が進んでしまうので、真正面の視点の位置をvalueに指定しておきます。

 次に、スライダーがドラッグされ、値が変更されたときの処理を書きます。スライダーがドラッグされたときの処理はslideプロパティに関数を指定します。関数にはドラッグされたスライダーの情報が渡されます。スライダーの値はvalueに入るので、この値を表示するX座標として、動画を内包しているdiv要素のleftプロパティに設定します。jQueryではcss()メソッドを使って、指定したCSSプロパティの値を設定できます。

 実際のスクリプトはサンプル03のようになります。なお、サンプルのように動画を2つ並べるのではなく、1つだけ表示したい場合はmaxの値を「1280-表示幅」に変更してください(sample.jsのコメントを参照)。

スライダーをドラッグすると動画を再生中に360度視点を変更できます

サンプル03[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>360 Movie</title>
        <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="js/view.js"></script>
    </head>
    <body>
    <h1>360 Movie</h1>
    <div id="viewer">
        <div id="contents">
            <video id="track1">
                <source src="movie.mov" width="1280" height="180">
                <source src="movie.ogv" width="1280" height="180">
            </video><!--
            --><video id="track2">
                <source src="movie.mov" width="1280" height="180">
                <source src="movie.ogv" width="1280" height="180">
            </video>
        </div>
    </div>
    <div id="slider"></div>
    <div id="control">
        <button onclick="moviePlay()">走行開始</button>
        <button onclick="moviePause()">一時停止</button>
    </div>
</body>
</html>


サンプル03[JavaScript:sample.js]


// 360度ドライブ動画
$(function(){
    var limit = 1280; // HDサイズの横幅ピクセル値(1280x720)
    var screenWidth = 320;  // 表示する動画の横幅
    // jQuery UIスライダの処理
    $("#slider").slider({
        min: 0,
        max: limit*2 - screenWidth,   // 1枚画像の場合はlimit - 320
        value : 480,    // 真正面の視点の位置
        slide : function(evt, ui){
            var x = -ui.value;
            $("#contents").css("left", x);
        }
    });
});
// 動画を再生する処理
function moviePlay(){
    document.getElementById("track1").play();
    document.getElementById("track2").play();
}
// 一時停止の処理
function moviePause(){
    document.getElementById("track1").pause();
    document.getElementById("track2").pause();
}


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く