HTML5 LAB

HTML5の習作・忘備録を兼ねた動作テストサイトです。
このサイト自体もHTML5で新たに追加されたマークアップを意識して構成されています。

動画再生:<video>

ファイル形式(各ブラウザの対応表)

下記の3型式を用意することで、各ブラウザに対応。(2012年4月時点※他の形式は未確認)

形式(拡張子) 対応ブラウザ
H.264(mp4) Safari、Internet Explorer(9.x〜)
Ogg Theora(ogv) Firefox、Opera、Google Chrome
WebM(webm) Firefox(4.x〜)、Opera、Google Chrome

タグの属性

下記の属性で設定可能。(2012年4月時点)

属性 設定内容
poster ロードエラー時に表示する画像の設定(環境によっては初期画像の表示)
width/height 横幅px/縦幅px
controls 動画コントロールの表示(仕様はブラウザ依存)
autoplay 自動再生
autobuffer 自動再生はしないが、バックグラウンドで読込を行う
loop ループ再生
muted 無音状態(ミュート)で再生
preload 初期の読込設定
auto:読込有
none:読込無
metadata:メタデータのみ読込
mediagroup 動画のグループ化(複数の動画ファイルを同期再生するときなど)

サンプル

controls・autobufferを指定、preloadは指定無で設置(ソースはH.264・Ogg Theora・WebMの3形式を用意して指定)

音声再生:<audio>

ファイル形式(各ブラウザの対応表)

下記の3型式を用意することで、各ブラウザに対応。(2012年4月時点※他の形式は未確認)

形式(拡張子) 対応ブラウザ
AAC(mp4) Safari、Google Chrome、Internet Explorer(9.x〜)
VORBIS (ogg) Google Chrome、Firefox(3.6〜)、Opera
WAV(wav) Safari、Google Chrome、Firefox(3.6〜)、Opera

タグの属性

下記の属性で設定可能。(2012年4月時点)

属性 設定内容
controls 動画コントロールの表示(仕様はブラウザ依存)
autoplay 自動再生
autobuffer 自動再生はしないが、バックグラウンドで読込を行う
loop ループ再生
preload 初期の読込設定
auto:読込有
none:読込無
metadata:メタデータのみ読込

サンプル

controls・autobufferを指定、preloadは指定無で設置(ソースはAAC・VORBIS・WEVの3形式を用意して指定)

図形描画:<canvas>

概要

各種の図形をJavaScriptベースで描画する。
width/height属性を指定すること出来るが、指定しない場合は初期値300×150になる。
<canvas>~</canvas>の中には、タグがサポートされていない場合に表示させるエラーメッセージを記述することが可能。

サンプル(2D:円弧)

arcメソッドを使用した円弧の描画例。

図形描画:<canvas> + Processing.js

概要

Javaベースのプログラミング言語「Processing」WEBブラウザで再現可能なJavaScriptフレームワーク「processing.js」。
canvas要素に動作ソースを読込で各種の描画が可能。
公式サイト:Processing.js

「Processing.js」ライブラリを使用した描画サンプル

ランダムアニメーションの描画例。

マウス追従アニメーションの描画例。

3Dワイヤーフレームアニメーションの描画例。

図形描画:<canvas> + Paper.js

概要

ベクター・グラフィクスを扱えるJavaScriptフレームワーク「paper.js」。
canvas要素に動作ソースを読込で各種の描画が可能。
公式サイト:Paper.js

「Paper.js」ライブラリを使用した描画サンプル

ベクターアニメーションの描画例。

マウス追従ベクターアニメーションの描画例。

マウスに反応するベクターアニメーションの描画例。