【mp4/flv動画ホームページ埋め込み】PCとスマホから見れるflash/mpeg4動画ビデオ埋め込みホームページの作成方法(2013.5.1)

◆アンドロイド端末で再生する場合の注意事項◆ (2014.8追記)

・アンドロイド端末(Android 4.0)で動画が再生できない場合は、adobeのサイト からAndroid版のFlashをインストールする必要があります。

 再生するファイル形式によっては、Flash Player 11.1 for Android 4.0 (11.1.112.61) でないと、再生速度がうまくいかない事象が見えております。

・映像をエンコードする際の条件によっては、アンドロイド端末でうまく再生できないことがあります。本ページの記載の例を参考にしてください。

デジカメやビデオカメラで撮影した動画を、簡単に自分のホームページに掲載する方法です。

パソコンだけでなく、アンドロイド対応スマートフォンからも視聴・閲覧できます。

 

<まず手順>

(1)まずビデオをflashファイルに変換する

(2)埋め込み用のプレイヤーソフトを選定する

(3)HTMLファイルを作成してアップする

 

(1)まずビデオをflashファイルに変換する

■ビデオをflashファイルに変換

ちゃんとした変換をするならば、VideoStudio などを購入して、flash に変換すると良いが、そうでなくともフリーのツールが使える。

デジカメで撮影した動画(mov, H.264)などの変換は、以前は対応していなかったソフトがあったが、最近では対応しているものも多い様子。

色々試してみて、よさそうなフリーの変換ソフトは 「Free Video Converter」

ダウンロード

http://www.freemake.com/jp/free_video_converter/

<理由>

・音ズレがしにくい(DVDVideoSoft Free Studioだと、変換方法によっては結構音ズレがする)

・GPUによるハードウェアエンコードに対応している

・変換が速いような気がする

この手のような、高機能なフリーのソフトは、インストール時に、本意ではないソフトもいっしょにインストールされる。要らないソフトはちゃんとインストール時にチェックを外して、インストールされないようにする必要あり。


「Free Video Converter」をインストールして起動

画面の真ん中に動画ファイルをドラッグアンドドロップで放り込むだけでOK。

ちなみに、これはCanonのデジカメで撮影したmov形式のファイル。

1280*720、30pfs(画面では29.97fpsと表示されている)

右上に「ファイルを結合」というスライドや、ビデオのリストの右側にはさみのマークがあるように、簡単な編集もできる。

下にある「FLV」ボタン(一瞬ボタンと気づきにくい・・・)を押すと、下のような画面が開く。

※ちなみに、mp4形式の場合は、mp4を選ぶ。以下はFLVで説明します。


FLV出力パラメータ画面を開く

あらかじめ設定されているプリセットがあるので、それでもいいのだが、ホームページに載せるならば、それほど大きいファイルサイズだと辛いので、ちょっとカスタマイズする。

「歯車」のボタンを押すと、詳細設定ができる。


出力ファイルの詳細設定をする

とりあえず、タイトルには好きな名前を入れる。

変換パラメータを設定する

最近のビデオは、ワイド(16:9)でフルHDやHDの解像度が多い。

スマホやPCから見てもらうならば、ホームページで表示させるにはオーバースペックです。

そのため、サイズを縮小して品質を抑え、ファイルサイズを小さくします。

サイズやフレームレートや音質を下げます。

■変換パラメータ

スマートフォンやPCから閲覧する場合、例えば以下のような設定で品質(ファイルサイズ)を抑えてみてはいかがでしょうか。

分類 元のビデオ 出力後のビデオ
解像度 ワイドの場合(16:9) 1280 * 720 (HD)
1920 * 1080 (フルHD)

 640 * 360
ノーマルの場合(4:3)

720 * 480 (DV方式)
1440 * 1080

 640 * 480
 320 * 240

フレームレート 25FPS〜30FPS〜60FPS

15FPS

オーディオ 44.1kHz ステレオ 32kHz モノラル

<設定例>

※コーデックなどは上記の設定でエンコードしないと、アンドロイドスマートフォンではうまく再生できないようです(2014.8追記)


変換する

「変換する」ボタンを押すとエンコードが開始される。

ちなみに、ワンパスエンコードか、ツーパスエンコードかが選べる。

ツーパスの方が品質が一般的に良いといわれているが、時間がかかる。

完成すれば出力先フォルダにFLVファイルが出力される。

(2)埋め込みプレイヤーソフトを選定する(ふらだんす編)

ホームページに埋め込みができて、スマホでも閲覧できるプレイヤーソフトで、

動作を確認したものは 「ふらだんす」 ・・・ http://www.streaming.jp/fladance/

とにかく日本語がうれしい。利用許諾を確認して、ダウンロード。

解凍すると3つのファイルができる。「fladance.swf」というファイルを自分のホームページのFLVファイルのあるところにコピーしておく。

(3)HTMLファイルを作成してアップする

「ふらだんす」 の場合、使用するファイルはこれだけ。

1つは、先ほど解凍した fladance.swf

もうひとつは、再生したい動画ファイル(FLV)

もうひとつは、HTMLファイル。

HTMLファイルのサンプルはこんな感じ。

sample1.html

<html>
<hr>
<h2>埋め込み動画サンプルビデオ</h2>
<hr>
「ふらだんす」の埋め込みビデオサンプル<br><br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="640" height="360" id="abc10">
<param name="flashvars" value="fms_app=&video_file=MVI_7565.flv&image_file=&link_url=&autoplay=false&mute=false&vol=&controllbar=true&buffertime=5" />
<param name="allowfullscreen" value="true" />
<param name="movie" value="fladance.swf" />
<embed src="fladance.swf" width="640" height="360" name="abc10" allowfullscreen="true" flashvars="fms_app=&video_file=MVI_7565.flv&image_file=&link_url=&autoplay=false&mute=false&vol=&controllbar=true&buffertime=5" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

動画ファイル名 ・・・ これは、再生したい動画のファイル名です。

640  360  ・・・ これは、画面サイズ。

abc10  ・・・ これは、ユニークなID。なんでもいいはず。同じHTMLファイル内で重複しても特に害は無かったが、やっぱりユニークにした方がよさそう。

その他は、おまじないだと思って、そのまま書けばOK。

buffertime=5  ・・・ 読込みバッファの時間 


◆「ふらだんす」を使ったサンプルページはこちら

https://dsstation.sakura.ne.jp/report/misc/flash/sample1/sample1.html

(右クリックで、ファイルに保存すればそのままサンプルHTMLが抜けます)


⇒ JWPlayer による表示の方法も分かったので、それはこちらを参照(でも、スマホでは表示できないよ・・・) は、こちら