Home > Archives > 2011-12 Archive

2011-12 Archive

【第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が勢力を伸ばしそうな気がします。

【第1回】HTML5で作る動画コミュニティサイト【HTML5の基礎】

  • Posted by: HKF管理人
  • 16:53
  • HTML5

HTML5の下地を作りました。

作ってみた感じ、HTML冒頭のドキュメント宣言やメタの部分がだいぶすっきりしてますね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>動画プレーヤー</div>
</section></div>
<footer id="footer">Copyright © hk_factory All Rights Reserved.</footer></div>

sanmple_html5_01

【第0回?】HTML5で作る動画コミュニティサイト【告知】

ちょっと連載物を作りたいなーと思う、今日この頃。

HTML5を調べていくうちにどんどんその魅力に惹かれていっている自分がいる。

というわけで、最終目標を『HTML5で作る動画コミュニティサイト』という事にし
そこまでの過程をつらつらHKFの方につづっていきたいと思います。
HKDの方がだいぶ落ち着いてきたので、ちょっとこっちも盛り上げよう。

詳しい技術解説(HTML5、javscript、jqueryとかの)は他の方のサイトをご覧になっていただくとして、ここではサンプルソースとかを多めに結果をすぐに見つけれるようにしようと思います。
文章が苦手であーだこーだ長文を書くのが苦手なんですごめんあさい。

大きな流れとしては、
HTML5の基礎

youtubeみたいな動画インターフェイス

ニコニコ動画みたいなインターフェイス

みたいな感じで以降かなと思います。

続くといいんですけど。

Home > Archives > 2011-12 Archive

twitter
リンク

Return to page top