カテゴリー: 動画

下記手順でＯＫ．検証済み。

http://cm-creation.net/yoshida/html5_video/8-1/sample_a.html

●動画はmp4とwebMの２種あればブラウザはカバーできる。

●mp4とwebMのコーデックはXMedia Recodeで作成可能。ただし、mp4のh.264はXMediaでは作れないので支給先にh.264タイプのmp4をもらう。

●ＩＥの９以下にもvideoが適用されるようにhead内に下記を表記　　ＩＥ6/7/8でも大丈夫。
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

●サーバー側でMIMEタイプの設定をするために.htaccessに下記を表記してサーバーへアップ

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

●body内に表記　下記はコントローラー付、オートスタート、videoタグが使えないブラウザにはリンクから読み込み。
スマホとタブレット用にポスターフレームを準備して１フレーム目に画像を表示させる。ビデオと同じ大きさの画像を準備。スマホとタブレット用に100％にすると左右に黒いバーが挿入されるのでビデオを固定サイズの最小幅に合わせる。
pタグ内の表記はvideoタグをサポートしていないブラウザのみ表示される。

<video controls  poster=”firstframe.jpg” width=”700″ height=”400″　autoplay>
<source src=”sample.mp4″    type=”video/mp4″>
<source src=”sample.webm”  type=”video/webm”>
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
<p><a href=”sample.mp4″>sample.mp4</a></p>
</video>

だけどもiOSやandroidのスマホやタブレットだけはautoplayは仕様上ならない。ユーザーがボタンを押すまではスタートされないことになっているとのこと。パケット通信が従量課金の可能性を考慮してユーザが意図して再生（タップ）するまで再生・読込ともに行わない仕様とのこと。

■■■■■■■■■■■■■■■■■■■■■

mp4とwebMの２種あればブラウザはカバーできる。

XMedia Recodeで作成可能

http://creator.mynavi-agent.jp/jinzai/feature/webtech/0001.html

video>タグ用の「mp4形式」は、動画のコーデックに「h.264」、音声コーデックに「AAC」を用います。
「h.264」形式は、ブルーレイで採用されたり、PSPなどの様々な機器で採用され、事実上動画形式の標準フォーマットとしての地位を確立しています。

※コーデックとは？
映像や、音声を圧縮する際の圧縮形式のこと、画像でいうとjpg・png・gifなど、音声だとmp3などかこれにあたる。
画像や音声だと、コーデックがそのまま拡張子になることが多いが、動画の場合、動画部分と音声部分を同梱するかたちになるため、動画形式をそのまま拡張子として用いることは無い。
その代りに「mp4」や「avi」といった動画形式を拡張子として用いることが多い。
動画と音声をパッケージ化し、場合によってはその他のメタ情報などを含めて一つのファイルとして纏めるためのファイル形式を「コンテナフォーマット」と呼び、「コンテナ化」されるファイルのコーデックには特に制約はありません。

ただし、冒頭で説明している通り、どの動画形式を採用するかはブラウザの実装側に委ねられています。
そして、「h.264」に対応しているブラウザは、Safari・IE9・Google Chromeで、Firefox・Operaは対応していません。

また、Googleもゆくゆくは「h.264」に対して非対応を表明しており、採用コーデックの行方はいまだ不透明です。

なぜこのようなことになっているかというと、「h.264」には、多数の特許権が含まれており、「h.264」を採用した製品をリリースするには、ライセンス料を支払わなくてはいけません。
現在、無料動画に関してはライセンス料は無料となっていますが、今後ライセンス料が必要になる可能性があり、Mozilla・Googleなどがその部分を懸念しているためです。
似たような問題に、GIFのライセンス料問題があります。

そういうわけで、Firefox・Opera・（将来的に）Google Chromeにも対応させましょう。
Firefox・Google Chrome・Operaで利用可能な動画形式に「Web M」というものがあります。

Web MはGoogleがリリースした、フリーの動画形式で、動画部分に、Googleが買収した「VP8」、音声部分に、オープンソースの音声形式「Vorbis」を採用しています。
「VP8」は、特許上の問題を抱えているという懸念がささやかれていますが、今のところは利用に問題はなさそうですし、そのあたりのことはエンドユーザーにはあまり関係の無い話です。

前置きが長くなりましたが、「mp4」と合わせて「Web M」動画を用意すれば、ひとまずは全ブラウザをサポートできるということになります。
※ただし、「Web M」登場以前のブラウザ（古いFirefoxや古いOperaなど）をサポートしようと思うともう少し話がややこしくなりますが、IE以外のブラウザは自動更新が前提なので、まぁいいでしょう。

さて、動画を2種類用意したのはいいですが、ブラウザの振り分けはどのようにやるのでしょうか？
JavaScriptを使ってUA判定させる・・・？

そんな面倒なことはしなくても大丈夫です。
<video>タグの仕様では、動画形式は各ブラウザの実装に委ねられているので、もともと複数の動画を用意しなくてはいけない前提で仕様が策定されているので、動画振り分けの仕組みも盛り込まれています。

<video width=”480″ height=”270″ controls autoplay>
<source src=”sample.mp4″>
<source src=”sample.webm”>
</video>

この様に<video>タグ内に複数の<source>タグを記述すれば、ブラウザは上から順にファイルを参照し、表示可能な動画があれば、その動画を再生します。
<video>タグでは、JavaScriptを使って対応ブラウザのチェックをするなどの処理は全く必要ないのです。

また、そもそも<video>タグに対応していないブラウザはどう振り分けるかというと

<video width=”480″ height=”270″ controls autoplay>
<p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p>
<source src=”sample.mp4″>
<source src=”sample.webm”>
</video>

この様に、<video>タグ内に未対応ブラウザ用の記述をすれば、その内容が表示されることになります

XMedia Recode 3.0.1.5の利用（デスクトップ/画像ファイル変換/）

XMedia Recodeは、Free WebM Encoderとは打って変わって、非常に高い設定機能を備えたフリーソフトです。
設定機能だけでなく、H.264形式の動画の書き出しにも対応しており、Adobe Media Encoderを用意できないユーザーでも、気軽にHTML5対応の動画を作れます。

XMedia RecodeはH.264　WebM   MP4 形式どちらも作れる

http://creator.mynavi-agent.jp/jinzai/feature/webtech/0003.html

■<video>タグによる動画再生サンプル

以下のサンプルでは、<source>タグで３種類の動画形式を指定しています。 mp4形式はGoogle Chrome・Safari向け、ogv形式はFirefox・Opera向け、webm形式はGoogle Chrome・Opera向けです。

スマホとタブレット用にポスターフレームを準備して１フレーム目に画像を表示させる。ビデオと同じ大きさの画像を準備。

<video width=”640″ height=”360″  controls   poster=”img/poster.jpg”>

スマホとタブレット用に100％にすると左右に黒いバーが挿入されるのでビデオを固定サイズの最小幅に合わせる。

（スマートフォンサイトの為のhtml5とcss3　ｐ196）（ＨＴＭＬ5　ＣＳＳ3　ｐ265）

●未対応ブラウザに表示する方法
<video>～</video>のなかに表記
<p>表記で記した内容は<video>に対応したブラウザには表示されることはない。

例

オートプレイについて
http://www.htmq.com/html5/video.shtml

一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media

HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。

html5mediaの実装

html5mediaの利用方法は簡単です。

ページに追加する一行

下記をページのhead内に記述します。

これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。
video, audioに非対応のIE7でも期待通りに動画が再生されます。

http://coliss.com/articles/build-websites/operation/javascript/js.html

MIMEタイプの設定

HTML5のvideoタグで動画配信する際には、まずサーバー側でMIMEタイプの設定を確認しておきましょう。httpd.confや.htaccessで、mp4, webm, ogvが登録されているかを確認します。Apache2ではmime.typesに記述されている場合もあるようです。登録されていなければ、.htaccessに下記のように記述しましょう。

.htaccess

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

https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats

WebM

WebM 形式は制限されたバージョンの Matroska コンテナフォーマットに基づいています。これは、常に VP8 ビデオコーデックと Vorbis オーディオコーデックを使用します。WebM は Gecko (Firefox)、Chrome、Opera でネイティブにサポートされており、また Internet Explorer や Safari ではアドオンを追加することでこの形式をサポートできます。

なぜ IE9 は WebM をネイティブサポートしないかに関する Microsoft の主張。

WebM 形式、具体的にいうと VP8 ビデオコーデックは、パテントプール形成のための MPEG LA による呼びかけに答えた企業のグループによって特許侵害で告発されましたが、MPEG LA はそれらの特許を “永続的、 移転可能、ロイヤリティフリーのライセンス” で Google にライセンスすることに同意しました。つまり事実上、WebM 形式に関するすべての既知の特許は無償で誰にでもライセンスされます。

Gecko は下記の MIME タイプを WebM ファイルとして認識します:

video/webm

ビデオを含む (オーディオも含むと思われる) WebM メディアファイル。

audio/webm

オーディオだけを含む WebM メディアファイル。

MP4 H.264 (AAC or MP3)

H.264 ビデオコーデックと AAC オーディオコーデックまたは MP3 オーディオコーデック による MP4 コンテナフォーマットは、Internet Explorer 、Safari および Chrome でネイティブサポートされていますが、Chromium や Opera はサポートしていません。Firefox はまもなくこの形式をサポートしますが、これはサードパーティのデコーダを利用できるときだけです。

MPEG メディアは特許で保護されており、無償ではライセンスされていません。すべての必要なライセンスは MPEG LA から購入できます。Mozilla [1、2]、Google [1、2] および Opera によると、現在 H.264 はロイヤリティフリーな形式ではないためオープンな Web プラットフォームには合いません。しかしロイヤリティフリーの形式が Internet Explorer や Safari でサポートされていないため、 それでも Mozilla は H.264 形式をサポートすることを決めており、また Google は Chrome から H.264 のサポートを削除するという約束をいまだに果たしていません。