トップページに戻る

■アイフォン4で撮影したビデオをホームページで公開する方法

※このページは管理人の覚え書き用として作成しています。

アイフォン4(iPhone4)で撮影したビデオ動画はMOV形式で保存されます。
サンプル用に無料動画Gyao「はじめの一歩」のオープニングをアイフォン4で撮影したMOV形式のファイルをそのまま置いておきます。

今、このページを見ているPC環境により、見れる方、見れない方がいるはずです。
インターネットでホームページを公開してる以上、閲覧してくれる全ての方に見てもらいたいと思うし、そうなるよう努力すべきだと思います。

多くのWEBサイトでは、Youtubeやニコニコ動画に動画を転送し、その指定スクリプトをHTMLに貼り付けて公開しています。
こんな感じになります。(違う動画です)
<a href="http://www.linkedtube.com/Saj0EOiv_F0f327ea6d83934a4c6258c557b29700b7.htm">LinkedTube</a>
MOVファイルをそのまま貼り付けた場合、対応したプレーヤーをダウンロードすることにより、ビデオ閲覧が可能になりますが、
そこまでして撮影したビデオを見てくれる人は少ないはずです。
Youtubeに代表される無料動画配信サイトを利用することで、全ての問題は解決するのですが、
WEBサイトとして公開している以上、自分の動画は自分で管理したいと思うのがWEBマスターの本音でしょう。

そこで今回、「できるかな?」では、MOVファイルをFLVファイルに変換し、プレーヤーも合わせてサーバにアップすることで、動画再生はサーバに任せてしまいます。
これにより、PC環境に依存することなく、誰でも見れるビデオ映像を公開することができます。


アイフォン4に保存されたMOV形式の動画ファイルをFLVファイルに変換する

準備
@Free Video to Flash Converterのダウンロード。
こちらの窓の杜よりダウンロードして下さい。
「AVI/MPEG/WMV/ASF/MOV形式などに対応しており、YouTube風の動画を簡単に作成可能」という触れ込みふれ込みのファイルコンバーターです。
windows7での動作については記載が無いですが、管理人宅では問題無く利用できました。
Free Video to Flash Converter
A出力ファイルの格納フォルダを作成する。
出力ファイルを格納するフォルダを作成し、Free Video to Flash Converterの「出力フォルダ」の指定を作成した格納フォルダに指定します。
管理人は、flvというフォルダを作成し、そこへ出力するように設定しました。
デスクトップにflvフォルダを作成し、そこへ出力する場合には、
C:\Users\owner\Desktop\flv ←こうなります。

ファイル形式の変換
@「ファイルを追加」ボタンをクリックし、変換したいファイルを指定します。
指定されたファイルは、Free Video to Flash Converter内に表示されます。
AQualityを選択します。
Normal Quality FLVと書かれた左側のプルダウンメニューから選択します。
Normal Quality - 320×240, 400kbit; MP3 64kbit, 22.05kHz, Mono
High Quality - 480×360, 760kbit; MP3 128kbit, 44.1kHz, Stereo
High Defintion - 1280×720, 2Mbit; MP3 256kbit, 44.1kHz, Stereo
Maximum Quality - Same size, 8Mbit; MP3 256kbit, 44.1kHz, Stereo

と4段階です。今回はNOrmal Qualityで変換を行います。
「変換」ボタンを押すと処理を開始します。

後処理と変換ファイルのサーバ転送

<object id="Object1" type="application/x-shockwave-flash" data="player_flv_mini.swf" width="320" height="240">
<a href="http://www.dvdvideosoft.com">free software</a></noscript>
<param name="movie" value="player_flv_mini.swf" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=ippo.flv&width=320&height=240&autoplay=0&autoload=0&buffer=5&playercolor=000000 &loadingcolor=9b9a9a&buttoncolor=ffffff&slidercolor=ffffff" />
</object>

このようなタグ(ソースコード)が発行されます。これをメモ帳などにコピーしておきます。
そして、先ほど作成したflvというフォルダ内には5つのファイルが出力されています。

(HowToUseFlash_Example.htmは不要です)
そして先ほどのソースタグをページ内の好きな場所に貼り付けます。
さらにflvフォルダ内の4つのファイル
ippo.flv(アイフォン4で撮影した、はじめの一歩の動画)
player_flv_mini.swf
start_frame.jpg
style.css

をサーバに転送します。
するとこうなります。

追記
アイフォンで撮影したビデオ動画を複数公開する場合、動画のタグを貼り付けたHTMLファイルと同じ場所にそのつどプレーヤーファイルやスタイルシートを転送するのは面倒です。さらには無駄にサーバのディスク容量を消費することにもつながります。
そこでサーバ内にflvというホルダを作成し、 player_flv_mini.swf、start_frame.jpg、style.cssだけを格納しておきます。
そして貼り付けるタグを変更します。上記タグの紫色の部分を変更します。
data="player_flv_mini.swf" → data="../player_flv_mini.swf" (例です)