« ◇「食うか食われるか」は自然界でありうるか? | トップページ | ◇じゃないですか:否定疑問による文脈提示 »

HTML5:video要素試験

メモです。

 HTML5のvideo要素試験

HTML5では<video>要素が新たに策定されました。
最も単純には次のようにしてビデオを導入できます。(この記事の実際の記述です)

<center> <!-- centerは不滅だ! -->
HTML5-video要素<br>
<video src="../../../video/poster_short.mp4" 
       controls="controls">
<p>ご利用のブラウザーでは再生できません</p>
</video>
</center>
この行の後ろにビデオを設定しています。ただし、現時点ではGoogleChromeとSafari、 およびIE9の非互換表示モード([ツール]-[互換表示]をチェックしない) でのみ 再生可能です。

対応しないブラウザではコンテンツ部に書いた「ご利用の ブラウザーでは再生できません」の文字列が表示されます。


HTML5-video要素

ビデオはmp4(h.264/aac)形式です。firefoxではogg(theora/vorbis)形式であれば 再生可能だそうです。

IE9の互換表示モード でvideoを再生するためにはmeta定義でX-UA-Compatible にIE=edgeを指定しておかなければなりません。が、ブログのページ としてはmetaの設定法がなく、結局videoは再生できません。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
この記事と全く同じ記述を別に置きました(ビデオデータのフォルダ位置のみ変えています)。ココログの直接配下と ならないため、記事に埋め込んだmetaが有効になるはずです。
../../../html/html5_video,htm"

参考までに同じ内容のFlashビデオを別ページ ../../../html/b325sub_flash.htm"に置きました。
別ページにしてあるのはiPadではFlash要素(swf)があると 「ファイルのダウンロード」動作に陥りページがうまく 表示できなくなるらしいからです。

HTML5で実装される2つの機能<canvas>と<MathML>も 使ってみました。

 参考:ビデオデータ作成パラメタ

HTML5用ビデオデータは、 1920×1080のmpeg2ビデオから、 TMPGenc4.0XPressを用いて次のパラメタで変換作成しました。


なお、ビデオの内容は ■2001年宇宙の旅;オリオン号発進(ポスターの動画化) のソースから15秒抜き出し、音楽を付加したものです。 音楽作成はCinescore、ビデオ編集はEdiusで行いました。

 補足:HTML5で使えなくなるとされている記述

<center>はHTML5で使えなくなることになっています。しかし、cssによるジュゲムジュゲム代替 表記は極めてまどろっこしく、本来の内容を見づらくしてしまいます。
どこに配置するかは内容とはレベルの異なる話であり、内容タグのstyleに入れるべきでは ありません。<center>のような形で外に別タグで設定すべきです。なお、一応<div> でも出来ることにはなっているのですが、現在の所ブラウザ毎の差が大きいため、<center> を使いました。参考:HTML5対応:divで乗り切れ

 ###

2011/4/26:IE9に関する記述追加

|

« ◇「食うか食われるか」は自然界でありうるか? | トップページ | ◇じゃないですか:否定疑問による文脈提示 »

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/489055/35042405

この記事へのトラックバック一覧です: HTML5:video要素試験:

« ◇「食うか食われるか」は自然界でありうるか? | トップページ | ◇じゃないですか:否定疑問による文脈提示 »