【ハウツー】クリエイターのためのWebテク講座 - videoタグを使った、プレイリストの作成 | クリエイティブ

お知らせ: 5月16日掲載記事に関するお詫び

マイナビニュース

クリエイティブ

急上昇ワード

[

]

【ハウツー】

クリエイターのためのWebテク講座 - videoタグを使った、プレイリストの作成

　 [2012/06/18]

印刷

前回は、videoタグを使った、簡単なサンプルを紹介しました。今回は、それを応用して、複数の動画を切り替えて再生できるプレイリストを作ってみましょう。

プレイリストの作成

3本の動画を用意し、それぞれのリストをクリックすると動画が切り替わります。

サンプルを見る

今回は、サンプルファイルとして、
「sample1.mp4」「sample1.webm」
「sample2.mp4」「sample2.webm」
「sample3.mp4」「sample3.webm」
を用意しました。

それでは早速実装を見ていきましょう。下記がHTMLのソースです。

<body>
<div id="playList">
    <p style="cursor:pointer" onClick="clickfunc(1);">ビデオ1</p>
    <p style="cursor:pointer" onClick="clickfunc(2);">ビデオ2</p>
    <p style="cursor:pointer" onClick="clickfunc(3);">ビデオ3</p>
</div>

<div id="video">
    <video width="480" height="270" controls autobuffer>
    <p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p>
    <source src="sample1.mp4">
    <source src="sample1.webm">
    </video>
</div>
</body>

サンプルのソースを見てみると分かるのですが、「id="playList"」を設定したボックスを「float:left」で横並びにしています。

次に、プレイリストの「<p>」に、指先カーソルを設定し、「onClick」イベントに、イベントハンドラ「"clickfunc(1);"」を設定します。では、「clickfunc」の実装を見てみましょう。 DOMの取得には、「jQuery」を利用します。

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
function clickfunc(value)
{
     var tag = '<video width="480" height="270" controls autobuffer><p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p>';

    tag += '<source src="sample' + value + '.mp4">';
    tag += '<source src="sample' + value + '.webm"></video>';

    $("#video").html(tag);
}
</script>

「clickfunc」では、引数「value」を受け取り、「value」の値を元に、videoタグを生成します。

tag += '<source src="sample' + value + '.mp4">';
tag += '<source src="sample' + value + '.webm"></video>';

$("#video").html(tag);

この様に、「value」の値により、「sourceタグ」の「src要素」を書き換えて、「id="video"」が設定されたボックスの中のHTMLを入れ替えます。

因みに、最初は「sourceタグ」自体にIDを振って、直接「src要素」を

$("#mp4").attr("src" , "sample" + value + ".mp4");

この様な処理で書き換えようと思っていました。しかし、いざ実装してみると、DreamWeaverのライブコードを見てみると、きちんと書きかわっていたのですが、肝心の表示されている動画の方が切り替わりませんでした。

「videoタグ」のJavaScript APIを使えばそのような処理も可能かもしれませんが、あまりお手軽な感じがしませんので、「videoタグ」を囲む「divタグ」を用意して、その中をごっそり書き換える処理にした方が楽ですね。

素材提供元：ハイビジョン映像素材集

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。