このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第30回

HTML5 videoとjQuery UIでパノラマ動画プレーヤー

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

古籏一浩

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

※この記事は「古籏一浩のJavaScriptラボ」の第30回です。過去の記事も合わせてご覧ください。

HTML5 video
スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します(Safari 4、Opera 10.50でのみ表示可能)

 Flash Playerなどのプラグインがなくても、ブラウザー上で動画を再生できるHTML5 video。前回の記事では、HTML5 videoで動画を表示・再生する方法を解説しました。今回は、360度動画が撮影できるカメラ「bloggie(ブロギー)」で撮ったパノラマ動画を素材に、スライダー操作で視点を切り替えられるパノラマ動画サイトを完成させましょう。

HTML5 videoをJavaScriptで制御する

 ブロギーで撮った360度動画は、以下のような横長の1枚の動画になっています。

動画

 パノラマ動画サイトのサンプルは、360度ぐるりと見渡せる動画にするため、この横長の動画を2つ、水平に並べます(同じ内容のvideo要素を2つ用意する)。2つのvideo要素はdiv要素(#contents)で囲み、スライダーの動きに合わせて座標を移動させます。実際に表示する領域は、別のdiv要素(#viewer)を用意し、スタイルシートのclipプロパティで切り抜きます。

 2つのvideo要素はJavaScriptで操作するため、それぞれIDを割り振っておきましょう。ここでは「track1」「track2」という名前のID名にしました。

動画
パノラマ動画サイトの構造。2枚の動画を並べて配置し、一部を切り抜いて表示。スライダーの動きに合わせて動画を左右に移動させます

 前回のサンプルでは単純に動画を表示するだけでしたので、今回はまず再生ボタンと一時停止ボタンを付けてみます。HTML5で動画の再生を開始するには、動画に対してplay()メソッドを呼び出します。たとえば以下のようにするとID名「track1」を持つvideo要素の動画が再生されます。


document.getElementById("track1").play();


 今回は2つの動画を同時に再生するので、以下のように続けて書きます。


document.getElementById("track1").play();
document.getElementById("track2").play();


 再生中の動画は、pause()で一時停止できます。以下のように書くと2つの動画が一時停止します。なお、一時停止の状態でplay()を呼び出すと、一時停止した時点から動画を再生します。


document.getElementById("track1").pause();
document.getElementById("track2").pause();


 ここまでをまとめたものがサンプル02です。ボタンをクリックすると動画が再生/一時停止します。

【図22】
走行開始ボタンをクリックすると動画の再生が開始されます一時停止ボタンをクリックすると動画が一時停止します。再度走行開始ボタンをクリックすると動画の再生が開始されます

サンプル02[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>360 Movie</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <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="control">
        <button onclick="moviePlay()">走行開始</button>
        <button onclick="moviePause()">一時停止</button>
    </div>
</body>
</html>


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


// 動画を再生する処理
function moviePlay(){
    document.getElementById("track1").play();
    document.getElementById("track2").play();
}
// 一時停止の処理
function moviePause(){
    document.getElementById("track1").pause();
    document.getElementById("track2").pause();
}


書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

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