flowplayerでストリーミング

ようやくストリーミングができるようになりました。一応WebDAVで動画ファイルを載せてた場合、見るには見れるんですが、ストリーミングではなく一度ダウンロードしてからなんです。なんとか出来ないかなーと探してるうちに少しずつ見つけて行って、ようやく簡単なやり方で出来るようになりました。あ、基本FLV(F4V含む)で進めます。 ※追記：mp4でもできました。mkvはできません。まずストリーミングですが、ストリーミングサーバとして立てる方法には・Apacheにプレーヤを入れる。・Darwinを入れる。・Red5を入れる。・lightなんちゃらを入れる。など多数あります。今回は「Apacheにプレーヤを入れる」です。この表現が正しいかはちょっと不明ですが、やっててそんな感じがしたので。使うのは「flowplayer」というもの。これのいいところは、他のやり方と違って、必要なファイルをWeb用のフォルダにいれてパスを指定してあげるだけでYoutubeみたいなFLVプレーヤになってくれるところ。他のやつは一度試したのですが結局手間過ぎて途中で挫折。。けどこれは簡単！ファイル入れてタグつけるだけです！ダウンロード（フリー版）解凍するといくつかファイルが入っていますが、必要なのは以下の３つ。・flowplayer-3.2.7.swf　　←プレーヤ・flowplayer.controls-3.2.5.swf　　←コントロールバー・flowplayer-3.2.6.min.js　　←API バージョンは違うかもしれませんが上の３つのファイルを使用します。 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>

画面サイズは自由に変えられます。このタグはググれば色々見つかるので、自分の好きなようにカスタマイズするといいです。僕のhtmlサンプルとしては

<html>
<head>
<script src="../../flowplayer/flowplayer-3.2.6.min.js"></script>
<title>Sample</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<CENTER>
<br>
<br>
<br>
<br>
<a href="Sample.flv" style="display:block;width:640px;height:480px;" id="player">
<img src="Sample.jpg" width="640" height="472" border="0" />
</a>

<script language="JavaScript">
  flowplayer("player", "../../flowplayer/flowplayer-3.2.7.swf",{
  clip:  {autoPlay: false, autoBuffering: true, scaling: 'fit'},
  canvas: {backgroundColor: '#000000', backgroundGradient: 'none'}
  });
</script>
</CENTER>
</body>
</html>

このようになります。アスペクト比固定やら初期画像を入れたりしてます。なんでこういった簡単なやり方がググって上位に出てこないんだ。。おかげでずっとさまよってました。ソース： Webページでストリーミング配信 Flowplayer 3.1.4 タグ設置例【ベーシック設定】ストリーミング配信用埋め込み動画プレイヤーのまとめ

Carpe Diem

備忘録

flowplayerでストリーミング