1. 動画のアップロードと表示 .mov .avi .mp4 .wmv .3gp

1. 動画のアップロードと表示
掲示板に動画を追加するには、以下の工程が必要です。
① 動画の作成(ビデオや携帯でのムービーの作成)
② 動画の編集(短時間のものは編集不要)
③ 動画の変換(YouTube のような flv ファイルへの変換)
④ 掲示板からの参照
【制限事項】
アップロードする動画ファイルの容量は、最大で 2000MB 以内にしてください。
1.1. 動画の作成
動画の作成は、ビデオカメラ(iphone 含む)や携帯電話のムービーで撮影できます。
ビデオカメラの場合は、数時間撮影可能です。携帯電話の場合は、15秒程度撮影できます。
ビデオカメラの動画フォーマットは、mov や avi、mp4、wmv などに変換したものを利用します。
携帯電話の動画は、3gpp フォーマット(MPEG-4 の MP4 ファイルフォーマットをベースとしたも
の)です。
.mov
.avi
.mp4
.wmv
.3gp
(ファイル容量最大 2000MB まで)※
※ :32ビット OS でアップロードできるファイルの最大容量が2GB であるため
図4
動画ファイル種類
1
1.2. 動画編集
動画の容量が 2000MB 以上の場合は、ファイルを分割するか編集を行い 2000MB 以下に編集して
ください。
1.3. 動画の変換
動画の変換は、mov や avi、mp4、wmv、3gp ファイルを Flash の flv ファイルに変換します。
.mov
.avi
FFmpeg
.mp4
.wmv
.flv
.3gp
図5
動画ファイルを Flash ファイルに変換
flv ファイルに変換するためには、変換ソフトウェア ffmpeg を利用します。
FFmpeg(エフエフエムペグ)は動画と音声を変換することのできるフリーソフトウェアであり、
libavcodec(動画/音声のコーデックライブラリ)、libavformat(動画/音声のコンテナライブラリ)、
libswscale(色空間・サイズ変換ライブラリ)、libavfilter(動画のフィルタリングライブラリ)など
を 含 む 。 ラ イ セ ン ス は コ ン パ イ ル 時 の オ プ シ ョ ン に よ り LGPL か GPL に 決 定 さ れ る 。
http://ja.wikipedia.org/wiki/Ffmpeg より
動画を flv フォーマットに変換するには、元の動画のファイル容量により変換に時間がかかるの
で変換終了後、メール通知することで、利用できるようにします。
1.4. 変換後の動画ファイル
留学コミュニティサイトは、掲示板で画像を利用できるようにしたため、サイト利用者個人ごと
に画像格納ディレクトリを用意しています。今回は、この画像格納フォルダの中に Flash ディレク
トリを作成します。変換した動画ファイルは、日付時刻と動画の縦横サイズをファイル名とした flv
ファイルとして Flash ディレクトリの下に保存します。
2
1.5. 留学コミュニティサイトでの動画ファイルの表示
留学コミュニティサイトでの動画ファイルのアップロードから掲示板での表示までの一連の操
作を携帯電話のムービーを例として説明します。
1.6. 携帯での撮影
携帯電話のカメラ機能を用いて15秒程度のムービーを撮影します。撮影したファイルをメール
の添付ファイルとしてパソコンから参照できるメールアドレスに送信します。
パソコンからメールを確認し、添付ファイルの動画ファイルをパソコンに保存します。
.3gp
.3gp
図6
携帯電話の動画を PC へ
パソコンから教育 GP の「留学コミュニティサイト」を WEB ブラウザを使って開きます。
1.7. 動画ファイルアップロード
留学コミュニティサイトにログインすると画面が表示されます。画面の右メニューの掲示板の下
に掲示板に動画メニューが追加されているのが確認できます。
動画ファイル
アップロード
メニュー
図7
追加メニュー
「動画ファイルアップロード」をクリックすると画面左に表示されます。
3
図8
動画アップロード画面
動画ファイルアップロードの「参照」ボタンをクリックし、パソコンに保存した 3gp ファイルを
指定します。
3gp ファイルを
クリックしま
す。
図9
ファイル選択画面
ファイルが参照ボタンの左枠に表示されたら、「upload」ボタンをクリックします。
動画ファイルのアップロードを開始します。
4
動画ファイルのアップロードが完了すると画面上に以下のようなメッセージが表示されます。
図 10
メッセージ画面
確認し「OK」ボタンをクリックすると元の留学コミュニティサイト画面に戻ります。
図 11 留学コミュニティサイト画面に戻った画面例
変換が完了するとメール通知するメールアドレスが表示されています。
5
1.7.1. 通知先のメールアドレス
通知先のメールアドレスは、留学コミュニティサイトにユーザ ID 登録時に入力したメールアド
レスかまたは、ログイン後のマイアカウントの「ユーザ名とパスワード」タグのメールアドレスに
設定されているメールアドレスに通知されます。
新規登録画面
マイアカウント画面
図 12
メールアドレス登録画面例
1.8. 変換完了通知メール
動画の変換が完了すると以下のようなメールが通知されます。
図 13
通知メール例
6
タイトル:留学コミュニティサイト
動画変換
本文:動画ファイル変換処理完了。
日付時刻_画像サイズ.flv というファイル名で作成しました。
変換中にエラーが起きた場合は、本文のメッセージが
①動画ファイル変換を試みましたが変換できませんでした。(copy)
②動画ファイル変換を試みましたが変換できませんでした。(ffmpeg)
のような2種類のどちらかのメッセージが返ります。
エラーメッセージ①は、ファイル変換が完了したが保存先へのファイルコピーでエラーが発生し
たことを示します。
エラーメッセージ②は、ファイル変換時にエラーが発生し、flv ファイルが作成できなかったこ
とを示します。
1.9. 掲示板での動画ファイル設定
変換完了通知が届くと留学コミュニティサイトにログインし、掲示板に移動します。
掲示板に書き込みを行います。
FLV Media Player
アイコン
図 14
FCKeditor 画面
動画を挿入する場合は、メニューアイコンの FLV Media Player をクリックします。
FLV Media Player 画面が開きます。
7
図 15
FLV Media Player 画面
ファイルタイプ:プレイリストを選択します。(選択された状態で表示されます)
プレイリストの URL が利用可能になります。
「参照」ボタンをクリックするとファイルマネージャーが開きます。
ファイルマネージャーの Resource Type は Flash 固定で表示されます。
図 16
ファイルマネージャー
8
変換されたファイルがファイルマネージャーの右画面に表示されます。
目的のファイルをクリックします。
FLV Media Player に反映されます。
図 17
反映後の FLV Media Player 画面
動画表示サイズ(半角数字)を指定し、
「OK」ボタンをクリックします。
元の画面に戻り、動画部分の表示が確認できます。
※ご注意:動画表示サイズの入力が全角の数字の場合、OK ボタンをクリックしても表示されま
せん。
9
図 18
FCKeditor に戻った画面例(反映済み)
10
保存ボタンを押して、再度画面が表示されると flv プレーヤーが表示されます。
図 19
掲示板表示例
flv プレーヤーの三角ボタン(画像の真ん中、左下のボタン)をクリックすると再生されます。
11
再生中画面例
図 20
再生例
●操作バー解説
音量
全画面表示
時間
再生/停止
図 21
操作バー
12
1.10. 動画表示について
動画表示は、FCKeditor の Plugin(プラグイン)として提供されている FLV Media Player を利用し
ています。
早送り、途中再生の可否は以下のとおりです。
表1
動画ファイル種類
動画ファイル種類(拡張子)
FLV 変換
早送り、途中再生
Mpeg4(mp4)
OK
×
Mpeg2(mpg)
OK
×
Jpeg(mov)
OK
×
Mpeg4(mov)
OK
×
AVI(avi)
OK
×
WMV8(wmv)
OK
×
WMV9(wmx)
NG
×
QuicTime(mov)h264
OK
○
基本的に「早送り、途中再生」はできないと考えてください。
13