【mp4/flv動画ホームページ埋め込み】

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


◆アンドロイド端末で再生する場合の注意事項◆ (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ファイルを作成してアップする

高速・夜行バス予約サイト WILLER TRAVEL 


(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://ds.skr.jp/report/flash/sample1/sample1.html

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


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


以下は、便利だと思ったサイトへのリンクです。適宜ご活用ください。


ビジネスホテル・旅館や高速バスが安く予約できるサイトは こちら にあります。

 (じゃらん、楽天トラベル の 安価な予約ページへのリンク集)

もし、旅行や出張の計画があるときは、早ければ良い条件の宿が予約できるので、ご活用ください。

⇒ ビジネスホテル・旅館の予約、高速バスの予約など、旅行がもろもろ予約できるページ


宿と交通費がセットになることで、バラバラに支払うよりも万円単位でお得になる場合もあるとのこと。

 楽天トラベル株式会社


東京ディズニーランド・ディズニーシー周辺の素敵なホテルを安く予約できるサイト(高速バス予約もできる)

楽天トラベル株式会社

便利情報:【東京ディズニーランド・シー】 お父さん・お母さんの失敗談&混雑予想・攻略法・ファストパス・迷子・トイレ・寒さ対策