CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

HTML5といえば?

HTML5といえば、すぐに出てくるであろうcanvasやvideo要素。
ちょっと進むと、border-radius、Web Fontsなど。
どっぷり浸かると、Application Cache(キャッシュマニフェスト)などなど。

せっかくHTML5でHTML5のサイトを作っているのだからvideoタグで何かやりたい!

ということで、動画にコメントを載せてみることに。

HTMLサンプル

HTML5GOGOってなに?

↑HTML5の情報サイトらしい

HTML5最高!

HTML5ゴーゴー!

こんなイメージ


JavaScriptを使っていないので、動画の開始、終了判定は取れていませんので、リロードしてお試しください。
動作環境

CSSサンプル

#videoSample {
	position:relative;
}
#videoSample #videoComment {
	overflow:hidden;
	position:absolute;
	width:600px;
	height:80%;
}
#videoSample #videoComment p {
	position:absolute;
	left:600px;
	margin:0;
	white-space:nowrap;
	text-shadow:1px 1px 1px #000;
	font-size:134%;
	font-weight:bold;
	color:#fff;
}
#videoSample #videoComment p:nth-child(1) {
	top:0;
	-webkit-animation:anime1 7s linear 0s 1 normal;
	-moz-animation:anime1 7s linear 0s 1 normal;
}
#videoSample #videoComment p:nth-child(2) {
	top:2em;
	-webkit-animation:anime1 7s linear 2s 1 normal;
	-moz-animation:anime1 7s linear 2s 1 normal;
}
#videoSample #videoComment p:nth-child(3) {
	top:4em;
	-webkit-animation:anime1 7s linear 4s 1 normal;
	-moz-animation:anime1 7s linear 4s 1 normal;
}
#videoSample #videoComment p:nth-child(4) {
	top:6em;
	-webkit-animation:anime1 7s linear 6s 1 normal;
	-moz-animation:anime1 7s linear 6s 1 normal;
}

@-webkit-keyframes anime1 {
	0% {
		left:600px;
	}
	100% {
		left:-200px;
	}
}
@-moz-keyframes anime1 {
	0% {
		left:600px;
	}
	100% {
		left:-200px;
	}
}

animationとkeyframesが肝です。

動作環境

Chrome最新版、Firefox 5以上のみ

Firefox、Operaでは、動画の再生は出来ますが、CSS Animationが使えません
※Safariでは、CSS Animationは使えますが、動画の再生は出来ません(oggしか用意していない為)

結論

どうせなので、やれるところまでJavaScriptを使わずに!と思っていましたが
早くもJSを使わないと各ブラウザへの対応が難しそうです。

しかし、各ブラウザ、videoへの対応が早くて喜ばしい限りです。
今はまだ、動画のエンコード形式で揉めているところですが、対応ブラウザの多いWebMで落ち着いて貰えると作り手は嬉しいですね。
今後、動画関係については、FlashからHTML5へ移行するような気がします。


追記(2011年6月22日)

Firefox 5からCSSアニメーションに対応されましたので、Firefox 5でも動作を確認すること出来ます。
合わせて、サンプルコードの’(シングルクオート)を削除しました。
アニメーションの名前をシングルクオートで囲んでいるとFirefox 5では動きません。

Subscribe:
pagetop