Carpe Diem

  Top > スポンサー広告> ストリーミングサーバ > flowplayerでストリーミング  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

flowplayerでストリーミング

2011 - 06/26 [Sun] - 03:46

ようやくストリーミングができるようになりました。
一応WebDAVで動画ファイルを載せてた場合、見るには見れるんですが、ストリーミングではなく一度ダウンロードしてからなんです。

なんとか出来ないかなーと探してるうちに少しずつ見つけて行って、ようやく簡単なやり方で出来るようになりました。

あ、基本FLV(F4V含む)で進めます。
※追記:mp4でもできました。mkvはできません。

まずストリーミングですが、ストリーミングサーバとして立てる方法には

・Apacheにプレーヤを入れる。
・Darwinを入れる。
・Red5を入れる。
・lightなんちゃらを入れる。

など多数あります。
今回は「Apacheにプレーヤを入れる」です。
この表現が正しいかはちょっと不明ですが、やっててそんな感じがしたので。

使うのは「flowplayer」というもの。
これのいいところは、他のやり方と違って、必要なファイルをWeb用のフォルダにいれてパスを指定してあげるだけでYoutubeみたいなFLVプレーヤになってくれるところ。

他のやつは一度試したのですが結局手間過ぎて途中で挫折。。

けどこれは簡単!ファイル入れてタグつけるだけです!

ダウンロード(フリー版)

解凍するといくつかファイルが入っていますが、必要なのは以下の3つ。

・flowplayer-3.2.7.swf  ←プレーヤ
・flowplayer.controls-3.2.5.swf  ←コントロールバー
・flowplayer-3.2.6.min.js  
←API

バージョンは違うかもしれませんが上の3つのファイルを使用します。
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 タグ設置例 【ベーシック設定】
ストリーミング配信用埋め込み動画プレイヤーのまとめ

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。