search :

archive :



« マークアップエンジニア募集 | トップ | WiMAX契約しました »

html5 video

_Web Service | August 19, 2014, 21:24
はてなブックマーク

HTML5のvideoタグは、以下のように記述します。

<video id="movie01" autoplay loop poster="img/pic01.jpg" width="1920" height="1080">
<source src="movie/movie01.mp4">
<source src="movie/movie01.ogv">
<source src="movie/movie01.webm">
<p>このブラウザではビデオを再生できません。</p>
</video>

Safari, Firefox用にogvファイルを用意し、念のためwebmも用意します。

mp4のファイルサイズ軽減、およびogv, webmへの変換には、Miro Video Converterを使います。

MP4: MP4
Theora: ogv
WebM(vp8): webm


ただ現状の最新バージョン3.0でogvを書き出すと、かなり画質が荒くなってしまうため、
以前のバージョン2.6を以下からダウンロードして使用します。

http://www.digital-digest.com/software/Miro_Video_Converter_history.html


IE9/10で再生されない場合があるため、.htaccessに以下を記述し、動画ファイルであることをサーバに認識させます。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm


IE6,7,8でもvideoタグを有効にするには、html5media.min.jsを使います。

http://html5media.info/

html5media

プロフィール

プロフィール

WEB制作・ブランディングを主軸とした、株式会社クリーム代表取締役。

案件につきましては、「お問い合わせページ」からお気軽にご相談ください。

Recommend

  • Josef Muller-Brockmann: Pioneer of Swiss Graphic Design
  • Who Owns The Water?
  • Helvetica: Homage to a Typeface
  • Corporate Diversity: Swiss Graphic Design and Advertising by Geigy, 1940-1970
  • Typography (Graphic Design in Context)
  • +81 voyage or Tokyo Graphic passport World Tour---At Center Pompidou in Paris and 3331 Tokyo
  • WONDERWALL ARCHIVES 01

archive :