Home > Tags > webm

webm

【第2回】動画プレーヤーの貼り付け【HTML5で作る動画コミュニティサイト】

前回のHTMLの基礎に、HTML5で追加された<vide>タグを使って、動画プレーヤーを貼り付けてみました。

HTML5で作る動画コミュニティサイト
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<div id="allArea"><header id="header"><hgroup>
<h1>HTML5で作る動画コミュニティサイト</h1>
<h2>サイト見出し2個目。</h2>
</hgroup></header><nav id="nav">
<ul id="mainMenu" class="clearfix">
    <li><a>Home</a></li>
    <li><a>about</a></li>
    <li><a>sitemap</a></li>
    <li><a>contact</a></li>
</ul>
</nav>
<div id="mainContents"><section id="movieContent">
<h1>動画タイトル</h1>
動画の説明
<div>動画プレーヤー
<video width="320" height="240" src="http://o-o.preferred.kddi-hnd1.v11.lscache1.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Csource%2Cratebypass%2Ccp&amp;fexp=903103%2C907201%2C910101%2C914102%2C913406&amp;itag=43&amp;ip=222.0.0.0&amp;signature=0A582FC4DC8F19A18AF155D4AAA26D87B479B1D0.679B84EA90346D9D75386E041954DBF7A672A2CE&amp;sver=3&amp;ratebypass=yes&amp;source=youtube&amp;expire=1324653776&amp;key=yt1&amp;ipbits=8&amp;cp=U0hRSVZQUV9MUENOMV9OSlVIOnRxaDFKVTdHVFZx&amp;id=0933c8a3d3f44959" controls="controls">動画を再生するにはHTML5に対応したブラウザが必要です。</video></div>
</section></div>
<footer id="footer">Copyright © hk_factory All Rights Reserved.</footer></div>

sanmple_html5_02_01

<video>タグの中にテキストを入れておくことで、HTML5に対応していないブラウザでは中のテキストを出力してユーザビリティを配慮。

<video>タグで使っている属性について。
src・・・動画ファイルのURL。上のサンプルは無駄に長いけど、youtubeから直に取ってるので気にしない
controls・・・再生ボタンや音量ボタンを表示

属性は他にも色々ありますが、あとで仕様変更の可能性もあるので割合。
再生ボタンなどのインターフェイスの見た目は、ブラウザが用意してくれるのでブラウザによって見た目は変わってくるみたいですね。flashだと自分でボタンを作ってイベントを作って・・・と面倒だったのでこれはすごいらくちん。
少し調べたところ、javascriptでいろいろイベントを設定できるみたい。再生時間によってテキストで字幕表示とか。

ブラウザからflashファイルを介さずに直で動画を再生できる・・・っていうのが個人的にすごくイイ。
上のサンプル動画はWebM形式。HTML5の動画フォーマットに関してはいろいろ言われていますが、youtubeがWebMに大きく動き出しているので、WebMが勢力を伸ばしそうな気がします。

Home > Tags > webm

twitter
リンク

Return to page top