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の非互換表示モード([ツール]-[互換表示]をチェックしない) でのみ 再生可能です。
対応しないブラウザではコンテンツ部に書いた「ご利用の ブラウザーでは再生できません」の文字列が表示されます。
ビデオは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に関する記述追加
| 固定リンク