概要
各種PC用ブラウザ、iPhone、iPad、Androidでの動画の表示テストを行うためのページです。
動画はダウンロードしてご自由にお使いいただいて構いません。
トリミング、エンコード、二次利用、再配布など、全てOKです。
ただし、この動画を利用、もしくは利用になれないことにより生じるいかなるトラブルや損害には、当方は一切の責任を負いません。
「このエンコードでもテストしてよ」等ありましたら、ご連絡くださいませ。
MIMEタイプの設定
.htaccessに下記を記述を追加しています。
AddType video/mp4 .mp4
AddType video/ogg .ogg .ogv
AddType video/webm .webm
表示方法
テスト結果
iOS、Androidは、特に記載のない限りシミュレータ(エミュレータ)にて動作確認を行っています。
動画へのリンク | video要素 | 埋め込み型Flashプレイヤー | MediaElement.js | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
H.264 | MPEG-4 | OGV | WebM | FLV | H.264 | MPEG-4 | OGV | WebM | FLV | source 要素 |
H.264 | MPEG-4 | OGV | WebM | FLV | H.264 | source 要素 |
|
Mac Firefox 10 |
○ | ○ | ○ | ○ | ○ | × | × | ○ | × | × | ○ | ○ | × | × | × | ○ | ○ | ○ |
Mac Safari 5 |
○ | ○ | × | × | ○ | ○ | ○ | × | ○ | ○ | ○ | ○ | × | × | × | ○ | ○ | ○ |
Mac Chrome 17 |
○ | × | ○ | ○ | ○ | ○ | × | ○ | ○ | × | ○ | ○ | × | × | × | ○ | ○ | ○ |
Mac Opera 11 |
○ | ○ | ○ | ○ | ○ | × | × | ○ | ○ | × | ○ | ○ | × | × | × | ○ | ○ | ○ |
iPhone (iOS 4.3) |
○ | ○ | × | × | × | ○ | ○ | × | × | × | ○ | × | × | × | × | × | ○ | × |
iPhone (iOS 5.0) |
○ | ○ | × | × | × | ○ | ○ | × | × | × | ○ | × | × | × | × | × | ○ | ○ |
iPad (iOS 4.3) |
○ | ○ | × | × | × | ○ | ○ | × | × | × | ○ | × | × | × | × | × | ○ | ○ |
iPad (iOS 5.0) |
○ | ○ | × | × | × | ○ | ○ | × | × | × | ○ | × | × | × | × | × | ○ | ○ |
Android (2.1) |
△ | △ | × | × | × | × | × | × | × | × | × | × | × | × | × | × | △ | △ |
Android (2.2) |
△ | × | × | × | × | × | × | × | × | × | × | × | × | × | × | × | △ | △ |
Android (4.0) |
△ | × | × | × | × | △ | × | × | × | × | △ | × | × | × | × | × | △ | △ |
GALAXY Tab (Android 2.2) |
△ | △ | × | × | × | × | × | × | × | × | × | △ | × | × | × | ○ | △ | △ |
覚え書き
iOS共通
- iPhone (iOS 4.3)、iPhone (iOS 5.0)、iPad (iOS 4.3)、iPad (iOS 5.0)
- → 1920x1080を再生できない。
動画へのリンク
- iPhone (iOS 4.3)
- → 再生や停止、拡大などの操作ができない。
- Android (2.1)
- → H.264、MPEG-4の場合、動画のタイムラインが動いているため一見再生されているように見えるが、エミュレータ側の原因か音声だけが再生される。1280x720、1920x1080は音声も再生されない。
→ その他の動画へのリンクの場合、ダウンロードになる。 - Android (2.2)、Android (4.0)
- → H.264、MPEG-4の場合、動画のタイムラインが動いているため一見再生されているように見えるが、エミュレータ側の原因か音声だけが再生される。960x540、1280x720、1920x1080は動画を再生できない旨のメッセージが表示される。
→ その他の動画へのリンクの場合、ダウンロードになる。 - GALAXY Tab(Android 2.2)
- → H.265 + 1280x720、H.265 + 1920x1080の場合、動画は再生されるが音声は再生されない。
→ MPEG-4の場合、動画は再生されるが音声は再生されない。
→ その他の動画へのリンクの場合、ダウンロードになる。
video要素 + H.264
- Android (4.0)
- → 音声だけが再生される。1280x720、1920x1080は何も再生されない。
video要素 + source
- Android (4.0)
- → 音声だけが再生される。1280x720、1920x1080は何も再生されない。
埋め込み型Flashプレイヤー + H.264
- GALAXY Tab(Android 2.2)
- → 「このビデオはモバイル用に最適化されていません」と表示される。動画自体は再生されるが多少もたる感じがある。
→ 1920x1080を再生できない。(メモリのメモリの関連っぽい。)
埋め込み型Flashプレイヤー + FLV
→ 960x540、1280x720、1920x1080の場合、「このビデオはモバイル用に最適化されていません」と表示される。動画自体は再生されるが多少もたる感じがある。MediaElement.js
- 共通
- → m4v拡張子を扱えない。拡張子をmp4に変更すれば解決する。
- iPhone (iOS 4.3)、iPhone (iOS 5.0)
- → 再生ボタンが標準のものとMediaElement.jsのものが重なるって見づらい。再生には問題ないので許容範囲だと思う。
- Android (2.1)
- → 動画のタイムラインが動いているため一見再生されているように見えるが、エミュレータ側の原因か音声だけが再生される。1280x720、1920x1080は音声も再生されない
- Android (2.2)
- → 動画のタイムラインが動いているため一見再生されているように見えるが、エミュレータ側の原因か音声だけが再生される。960x540、1280x720、1920x1080は動画を再生できない旨のメッセージが表示される。
- GALAXY Tab(Android 2.2)
- → 1280x720、1920x1080は動画は再生されるが音声は再生されない。
MediaElement.js + source要素への併記
→ 音声だけが再生される。1280x720、1920x1080は何も再生されない。
結論
2012年2月29日現在の結論は下記の通りです。
H.264エンコーディング、横960px縦540px程度の動画を1つだけ用意する。
動画は直リンクする。
埋め込む場合はMediaElement.jsを利用し、video要素に上記動画を指定する。
ただし、Windowsは未確認。
更新履歴
- 2012-02-29 : MediaElement.jsを追加
- 2012-02-23 : GALAXY Tab(Android 2.2)を追加
- 2012-02-03 : 一通りの動作確認完了