動画をサイトで配信するには大きく分けて2通り。
1,Youtubeにアップしてタグを貼り付け(簡単)
2,自サーバ上にアップし、HTML(objectやvideoタグ)等で表示させる。(サーバーの転送制限の問題や端末によっては単純に変換するだけでは正常に再生できないなどいろいろ問題ありで結局面倒。でもどうしてもやりたい場合もあるw)
(設置用タグの例はページ下部)
当然Youtubeのほうが簡単で手っ取り早いけど、
動画内容によってはYoutubeにアップできないなどの特別な事情がある場合、
やむを得ず②を選択するわけだけど、PCと違い端末環境によってもろもろあるため結構めんどい・・・。iPhoneあるしフラッシュは使えないし・・・。
スマフォであればとりあえずMP4をHTML5のvideoタグで設置するのが簡単で手っ取り早い。
が、iPhoneでは正常に再生されるがAndroidではそのままではなぜか再生されなく(docomo Galaxyで再現)、いくつかの結構複雑な作業が必要になり、忘れそうなので備忘録。
※追記 やはり変換するソフトによるかも。そのまま再生できてればOKかと^^;
■AndroidでMP4のストリーミング再生可能にするための作業
※あくまで自分用の暫定的な覚書です。秒進分歩で変わる可能性あり。
※また、環境はwinXPです。Macの方は・・・ごめんなさい・・・俺Mac知りませんw・・・
FormatFactoryやffmpegなどめそこそこメジャーなフリーソフトで単純にmp4に変換しても、
iPhoneでは正常に再生できるがAndroidでは
「動画を再生できません この動画はご使用の端末でストリーミングできません」
というメッセージが出て再生できない。
調べてみたら、動画ファイルのヘッダが適切でないときに出るエラーのよう。
なんのこっちゃw
1,下記サイトよりmp4box をダウンロードする
http://www.videohelp.com/tools/mp4box
2014/2/16 追記
バージョアップを繰り返していてファイルが変わっているようです。
以下ページで
「MP4Box-0.4.6-rev2735.zip」
をダウンロードすればOKと思います。(少なくとも自分はこのバージョンを使っていました)
※まぁ最新版でもOKなのかもしれませんがね・・・。
http://www.videohelp.com/tools/MP4Box/old-versions#download
解凍し、そのままではフォルダ名が長いのでテキトーにMP4Box等に変更する。
そのMP4Boxフォルダ内のMP4Box.exeをダブルクリックで実行してみて、
「msvcr100.dll」がないため・・・と表示されたらmsvcr100.dllもダウンロードする必要があります。
下記サイトからmsvcr100.dllをダウンロード(リンク切れになっていたら検索すればOK)
http://jp.dll-download-system.com/docman/m-dlls-not-system-/msvcr100.dll/details.html
※ちょっと個性的なサイトだけど(失礼ですよ(汗)こちらので問題なかった。ウィルススキャン済
2014/2/16追記
リンク切れ?もしくはトラップサイトぽかったので修正しました。
てかなんかここ数年の流れとしてフリーのソフトをダウンロードするのにやたらトラップ(アフィリエイト広告)が多くて見つけるのが大変wっていう。。。
どうなってんだよ~w昔はそんなことなかったのにな・・・。
ってことで探してもうまく見つからず、また配布元と思われるMicrosoftも相変わらず迷子で見つけらんなかったので、もうファイル置いときますw
もしMS関係者の方で「そりゃまずいんじゃないすか?」って思ったらすぐにご連絡ください。
その代わり直ダウンロードのURLをずばりお教えて下さい~。
※MSさん、そんな運営だから便乗するやからが出るんですよ~
msvcr100.dllダウンロードはこちら(実際に使ってたものです)
で、msvcr100.dllをC:\windows\system32内に放り込んでこちらは終了。
MP4BoxフォルダをC:\Program Files\内に放り込む。
2,そこに環境変数からパスを通します。
(下記画像参照)
下の図では、C:\Program Files\MP4Boxにパスを通しています。
「システムのプロパティ」はマイコンピュータを右クリック→プロパティです。
3,では「C:\Program Files\MP4Box」と指定しています。
3,コマンドプロンプトを起動
(どこにあるか忘れたって?(笑)スタート→すべてのプログラム→アクセサリ)
変換したい動画ファイルが保存されたディレクトリに移動します。
※コマンドプロンプト上でのコピペはCtrl+Vなどは使えません。ウインドウの上部(もしくはがウインドウ内)で右クリックからできます。ちなみに範囲指定でドラッグしてコピーします。
特に理由がなければCドライブ直下にvideoフォルダを置き、その中に変換したいmp4ファイルを置くと楽です。
その場合のコマンド例
※cdはチェンジディレクトリの略(たしか)
cd C:\video
エンターでディレクトリが移動。
(これはvideoフォルダ内にmp4ファイルがある場合の例)
4,で、下記コマンドを実行
MP4Box -add (変換前ファイル名) -brand mmp4:1 -new (変換後ファイル名)
を実行する。なにかが走ればOK。
※自分の場合、なぜか2回目ができなくなり、PC再起動したら何回でもできるようになった。
で新しいファイルが作成されれば完成。
こちらであればAndroidでも正常に再生した。
(すべての端末での確認はしていません。が今後すべての端末にて確認予定(仕事上必要)なので、その際にまた報告します。)
※追記 おそらくほとんどのAndroid端末で正常に再生できているもよう。再生できないなどの場合は端末情報などのコメントをいただけるとありがたいです。
もうちょっと簡単にできるようになればいんだけど・・・
コマンドプロンプトとかちょー久しぶり触ったしw
設置用videoタグ例 コピペ可
<div style="text-align:center"> <video preload="none" poster="poster.gif" src="test.mp4" onclick="this.play();" autoplay controls> </video>
preload=ページ表示時に読み込みを開始するかどうか。とりあえずnoneでいいかと。値がautoで自動的にダウンロード。
poster=はページ表示時に表示されるサムネイル(デフォルトでは小さいアイコンが表示されるだけなので、できれば指定したい。ただし画像を別途用意する必要がある。動画のスクリーンショットなど)
onclick=端末によってはアイコンをクリックしてもうまく再生されない場合があるとかでこの指定をしておいたほうが無難だとか。
controls は再生用のコントローラを表示させるもの。通常は表示されるのでタブレットだけ?っぽい
autoplay=ビデオ再生の準備が整い次第再生が開始される。付けといたほうがいいっぽい
widthやheightも指定できます。
videoタグはインライン扱い?margin:autoは効かなかった。
videoタグで検索すればもっと詳細がわかるかと。
追記
このページ、実はこのサイトで一番アクセスが多いす^^;
困ってる方が多いのですね。。。でもこれって実機が無いと確認できないしで、怖いすね。。。
なんつーか規格がバラバラで統一されてないんだなと。。。たかが動画なのに。。。
やっぱYoutubeすげ~ってことですな。特に理由が無ければYoutubeにアップが一番無難で早いです。当然PC、スマホ、携帯の3デバイス対応してるし。
記事の内容が近いもの:
- javascript使用したスマートフォンの判定(判別)
- スマフォサイトをPCで表示確認するためのブラウザ
- jQueryMobileで作るスマートフォンサイトのHelloWorld
- phpでスマートフォンの判別(判定)
- iPhone良いとこ悪いとこ(あくまで主観)そしてSDで電話帳移行
- Web管理者が知っておくべきスマートフォンブラウザの問題点
大変助かりました。
ありがとうございます。
初めまして!
まさに探していた方法がここにありました!
そこで、一つ質問なのですが
今使用しているPCにはQuickTimeの7.2が入っているのですが
それが入っていても正常に動画が再生できますでしょうか?
管理人です。
お返事が遅くなりまして大変恐縮です。。。
近頃返信がかなり遅れ気味になっております。
すみません。。。
コメントありがとうございます。
スマホでの再生を前提としておりますので
PCに入っているソフトは関係ない気がしますが、どうでしょうか。。。^^;
的外れでしたらすみません><
上記の方法でぶじAndroidで再生できるようになりました!
…が、なぜかmp4ファイルの再生時間が2倍になってしまったんですが、
同じような症状の方はいらっしゃいますでしょうか。
30秒の動画を変換⇒表示される動画の長さが60秒に(実際再生すると30秒で終わる)
管理人です。
お返事が遅くなりまして大変恐縮です。。。
近頃返信がかなり遅れ気味になっております。
すみません。。。
コメントありがとうございます
こちらでは再現ありませんでしたが、PCでの再生もそのようになってしまうということでしょうか・・・・
どなたかご存じないでしょうかね。。。