ホームページを作成に関する備忘録

HTML5で、動画を組み込む(Video Tag)試行錯誤

Xhtmlファイル

(1)<embed width="740" height="360" src="aaaaa.mp4" type="video/mp4"></embed>

(2)<video src="aaaa.mp4" width="740" height="360" controls></video>

(3)<video width="740" height="360" controls>
 <source src="aaaa.webm" type="video/webm">
 <source src="aaaa.mp4" type="video/mp4">
 </video>

 今までは、(1)のような形でembedタグを使って動画についても貼り付けていたのですが、windows10やスマホなども進化してきて、ほぼ巷に出回っているブラウザ類がhtml5をサポートしてきているので、videoタグで設置してみることにしました。しかし、そこからがちょっと試行錯誤。動画ファイルはmp4形式でしたので、ひとまず、(2)のようにvideoタグを使ってやってみましたが、「ファイルが壊れています」とのメッセージが出てだめ。いろいろと調べていると、ブラウザの種類によってサポートする動画形式が違うらしい。firefoxはmp4はだめで、webMという形式らしい。webMにどうやって変換するのか。PC内に入っている動画編集ソフトではそのような形式はない。ということで、窓の杜に行くと、XMedia Recode というソフトが使えそうということがわかりました。早速、mp4ファイルを読み込んで、それをwebM形式に変換。そして、htmlの内容も(3)のように変更したらやっと見られるようになりました。一応、スマホでも見れるかということで、自分では持っていないので、娘のスマホ(iPhone6)を借りてみたところ、見れました。ということで、まだHP内に動画の部分があるので、それも徐々に変更することにするか。