動画のスマホ対応

しないといけんなーっと思いながらも、してなかったのですが、いい加減ちゃんとやろうかなと。


今のサイトではFlashにより動画を挿入しています。
iPhone、AndroidともにFlashの対応はしないようで、HTML5で加わった新要素videoタグを使って動画を挿入するようとのこと。
てーことは、ソースをHTML5に書き換えるとこからだな?よしきた。・・・・ふぅ。


●フォーマット

下記によると、HTML5動画で対応しているフォーマットは3つ。MP4、WebM、Ogg。

HTML5動画の紹介
http://www.ibm.com/developerworks/jp/web/library/wa-html5video/

動画、音声に使われるコーデックはそれぞれこのようになるらしい。

MP4: H264 動画+AAC 音声
WebM:VP8 動画+Vorbis 音声
Ogg: Theora 動画+Vorbis 音声

ブラウザ対応表を見ると、WebMとOgg はどちらもサポートしているブラウザが多いので、どちらかで良いかな。
ここによると、一般的にはWebMの方が優れている、とあるので、WebMにしよう。

HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats

●エンコード

XMedia Recodeという多形式対応かつ、多機能で、フリーで使用できる優れものを使います。

XMedia Recode の使い方 ~ ビデオファイル変換 ~
http://donkichirou.web.fc2.com/XMediaRecode/XMediaRecode.html

① 動画をドラッグ&ドロップして、
② リストに追加、
③ プロフィールををカスタムにし、
④ 形式をWebM・MP4を選択して、
up1_20140612211852e51.jpg

⑤ 動画コーデックを確認。
up2_201406122118554f0.jpg

⑥ 音声コーデックも確認して、
⑦ エンコード!
up3_20140612211855a2a.jpg

簡単!


●ソース
<video controls>
    <source src="MOVIE_PATH.mp4" type="video/mp4">
    <source src="MOVIE_PATH.webm" type="video/webm">
</video>


ソースもわかりやすいね。
関連記事

コメント

コメントの投稿

非公開コメント

このブログについて
□ ブログ内容
決まった趣旨はありません。
興味を持ったこと・日常で行ったことを何でも書きます。

3DCG・プログラミングなどが多めです。

□ 現在の活動
・ウェブサイト制作
 (http://tiblab.net)
・3Dゲーム制作
 (コックパニック)
検索フォーム
ユーザータグ

Blender キャプチャ blendファイル BGE Python GameEngine ムービー Android CG  Red5 Terragen C# C++ 

カテゴリー
プロフィール

TiBra

Author:TiBra
趣味でCG制作、プログラミング等を行っています。メイカーズに憧れています。

ネットを通じた交流を広げたく思っていますので、コメント・メールはお気軽にどぞー

戯言程度のことは、こちらのブログに投稿しています。基本戯言なので、実質移転しているようなものです。

Mail:tibraあっとlive.jp
HP:TibLabmemocode
動画:VimeoFC2動画ニコニコ
ファイル:SkyDrive
企画:3Dゲーム作業実況

Blogリンク
不都合がございましたらご連絡ください。
当ブログのリンクバナー
FC2 ID
FC2カウンター
RSSフィード+解析コード