及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > HTML > HTML5 Video

HTML5 Video

HTML5 の Video 要素は、Flashなどのようなプレーヤーを使わずに動画を再生できる。
だが、クロスブラウザに対応させるために、
3つ（3種類の形式）も動画を用意しなければならないのが面倒。

HTML5 video での動画表示サンプル

videoの表示部をマウスオーバーで、再生・一時停止などのボタンが表示される。
video 要素に「autoplay」属性を追加する事で自動再生させられるが、あまり推奨されていないようなので、「autoplay」属性は入れていない。再生ボタンで動画再生スタート。

サンプルの video のソースコード

<video width="320" height="304" poster="../../common/images/html5_video.jpg" controls >
<source src="../../common/flash/flv/model.mp4" type="video/mp4">
<source src="../../common/flash/flv/model.ogv" type="video/ogg">
<source src="../../common/flash/flv/model.webm"  type="video/webm">

お使いのブラウザは、videoタグをサポートしていません。

</video>

再生可能ブラウザ

古いブラウザでは機能しない。
Safari 3.1以降
Firefox 3.5以降
Internet Explorer9以降
Google Chrome
Opera の最新ビルド

video 要素

詳細　video 要素 - html5doctor - HTML5.JP

記述例

<video width="320" height="230" poster="image.jpg" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm"  type="video/webm">
<source src="movie.ogv" type="video/ogg">

お使いのブラウザは、videoタグをサポートしていません。

</video>
video 要素にはたくさんの属性が用意されている。
  • 「width="320" height="230"」　video の表示サイズ。
  • 「poster="image.jpg"」　動画がロードできない場合に表示させる画像。
    ※Firefox(ver.11.0) では属性が autoplay でない場合、画像は通常表示された。動画再生で消えた。
  • 「controls」　再生・一時停止・ボリューム等のコントローラ。
  • 「autoplay」　自動再生。
など・・・。
メモ：　autobuffer は preload に変更されたらしい。

動画の準備

3種類の形式（フォーマット）の動画を用意する。

ビデオ コーデック（動画のメディア形式）

・H.264/AAC(拡張子 .mp4)
・Theora(拡張子 .ogv)
・VP8(拡張子 .webm)
以上の3種類の形式の動画を用意しておく。

サンプルで表示している video では以下の3つの動画を用意した。
内容は3つとも同じ動画で、フォーマットが違うだけ。
model.mp4
model.ogv
model.webm

私が今回使用したコンバーター

形式(フォーマット) 対応ブラウザ 私が今回使用したコンバーター
mp4 Google Chrome,Safar,IE9 AVS4YOU Video Converter
(FLVファイルを MP4 (H.264/AVC)へ)
ogv Firefox,Opera Miro Video Converter(Free)
(AVIファイルを Theora へ)
webm Google Chrome,Opera AVS4YOU Video Converter
(mp4ファイルを WebM(vp8) へ)
動画の、上記3つの形式へのコンバート（変換）は全て「Miro Video Converter」で出来そう。

Firefox で ogv が再生されない場合

HTML5 の video で、Firefox は ogv 形式の動画を再生する。
ローカル環境では Firefox で video がきちんと再生されたのに、さくらインターネットにアップロードしたら再生されなくなった。.htaccess に手を加える必要があった。

解決法

こちらのサイト様を参考にさせて頂きました。ありがとうございます！
HTML5でサイトリニューアルしました。＋ 簡単な解説 - ORANGE AGE Weblog
<audio>－HTML5タグリファレンス

MIMEタイプに ogv（動画コーデック Theora） と ogg（音声コーデック Vorbis）を追加するよう「.htaccess」に 記述する。 
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
「.htaccess」ファイルの作成方法については、下記のページを参照のこと。
さくらインターネットでリダイレクト Redirect を設定(.htaccess)
MENU Ξ