2013年4月17日

HTML5ビデオタグで動画をアップしてみたら、Firefoxで見れない!?

投稿者: 管理者

HTML5ビデオタグ、こんな風に書いてはみたものの、どういうわけかFirefoxで見れない。
Google Chromeも、IE9も見れる。

こういう風に書いてみた。

[html]
<video id="sample" width="xxx" height="xxx" controls="controls">
<source type="video/mp4" src="http://xxx.mp4">
</video>
[/html]

アップロード動画を見ようとしたら、Firefoxで見れない。
こんなアラートを出してくれます。

スクリーンショット 2013-04-17 16.46.58

どうやらFireFoxではh.264を対応していない、とのことのようだ。

mozilla supportより

なぜ Youtube の HTML5 は Firefox に対応しないのですか?

HTML5 標準には video タグの仕様が記されていますが、その コーデック までは記されていません。Youtube は動画のコーデックに H.264 を使用しています。このコーデックは特許で保護された技術であるため、ライセンス料金を支払わなければ使用できません。Google 社と Apple 社は H.264 デコードを彼らのブラウザで使用できるようにするため、この特許を保有している MPEG LA に巨額のライセンス料金を支払っています。

Mozilla は自由でオープンな Web を信じています。特許で妨げられたフォーマットに依って立つことは、ソフトウェア開発や創造性を、そのフォーマットの使用が許可された人々だけに制限することになります。例えば、H.264 形式の動画をコーデックの使用許可なしにあなたの Web サイトに掲載すると、H.264 の特許保有者があなたを損害賠償で訴えるかもしれません。

詳しい情報については shaver » HTML5 video and codecs(英語) をご覧ください。

Firefox はどのコーデックに対応していますか?

Firefox は、Xiph.Org Foundation によって開発されている Vorbis オーディオ および Theora ビデオ ファイル形式に対応しています。これらは特許による制限なしで自由に使用できます。Vorbis と Theora は、どちらも Ogg コンテナフォーマット を使用しているため、”ogg” と呼ばれることがあります。

Ogg Theora に対応している Web サイトの例として Dailymotion が挙げられます。…

とあります。

.webm と Theoraの .ovg のファイルの準備が必要!

動画形式の変換は、これがよかったです!

Miro Video Converter(ミロビデオコンバーター)

ドラッグ&ドロップ操作で手軽に使える、動画ファイル変換ツール。
使い方なんて、しらべなくても使えます。ほんと簡単。

[html]
<video id="sample" width="xxx" height="xxx" controls="controls">
<source type="video/mp4" src="http://xxx.mp4">
<source type="video/ogv" src="http://xxx.ogv">
<source type="video/webm" src="http://xxx.webm">
<p>そのブラウザはダメだよん。</p>
</video>
[/html]

さくらサーバ、スタンダードプランでは以上で視聴できた。
サーバによっては、.htaccess に以下を書くとなっているようです。

[html]
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
[/html]