Webページでストリーミング配信

(2009.3.3-2011.3.31)

Webページで動画をYouTubeのようにストリーミング配信する.このページの過去のバージョン(FlowPlayer1.4)はここです.

(環境) HTML 4

まず,デジカメなどで撮影した動画を,Adobe Flashの動画形式である,flv形式に変換する.

有料ソフト:Adobe Flash Video Encoder

フリーソフト:Riva FLV Encoder 2.0 (このソフトでうまくエンコードできたこともできなかったこともありました.できなかかったことの方が多かったので,以後,私はadobeを使っています.)

Webページで再生するには,Flashで作られたFLVを再生するフリーソフトFlowPlayer3.2を使う.htmlファイルのなかに埋め込むには次のようにする.

<script src="flowplayer-3.2.6.min.js"></script>


<a href="test.flv" style="display:block;width:640px;height:480px;" id="player"></a>

<script language="JavaScript">

flowplayer("player", "flowplayer-3.2.7.swf",{

clip: {autoPlay: false, autoBuffering: true}

});

</script>

1行目は(動画ごとではなく)HTMLファイルのどこかに1箇所記述する.HTMLファイルのヘッダ(<head>と</head>の間)に記述しても良い.

test.flvがflvに変換した動画ファイル名.

横幅,高さはそのまま.(横幅や高さは,動画ファイルより小さくしたり,大きくしたりしてもOK.色々なサイズの埋め込みをひとつの動画ファイルから作ることもできる.その場合,2つめの埋め込みではplayerを別の文字列player2などとする)

ページのロードと同時に自動再生するには,autoPlayをtrue,そうでない場合はfalse.

FlowPlayer3.2.7に入っているflowplayer-3.2.7.swf, flowplayer.controls-3.2.5.swf, flowplayer-3.2.6.min.jsファイルをhtmlファイルと同じフォルダに置く.

以下はHTMLファイルのサンプル.

<html>

<head>

<script src="flowplayer-3.2.6.min.js"></script>

<title>FlowPlayer</title>

</head>

<body>

<a href="test.flv" style="display:block;width:640px;height:480px;" id="player"></a>

<script language="JavaScript">

flowplayer("player", "flowplayer-3.2.7.swf",{

clip: {autoPlay: false, autoBuffering: true}

});

</script>

</body>

</html>

綺麗なムービーではありませんが,例です.北八ヶ岳の鳥の声.1つの動画ファイルから2つのサイズの埋め込みを作ってみました.