Help > Player

Webページで動画を再生するプレイヤの組み込み方法などを例示する。

FLV Player Sample
WMV Silverlight Sample
DivX WebPlayer
BrightCove Player
MySpace Player

webにあるFlashビデオ(flv)を再生するプレイヤ二つを紹介する。

１．JW Player

　LongTail Video共同設立者でFlash ビデオ開発専門家の Jeroen Wijering が提供しているＦＬＶプレイヤだ。Ｆｌａｓｈ再生コードの組み込み方については、Embedding Flashを熟読することを勧める。 Javascript, Embed, Object、XMLを使った１８種類のプレイヤ例の説明がある。

いちばん簡単なシングルプレイヤのObjectコードを下記に示す。実際に動いているＨＴＭＬのソースを改変して使うのがいいだろう。

Object コード例　⇒デモ Basic　Advanced（未完）

プレイヤの高さは、再生ボタン部分を確保するために、動画の高さ＋２０とする
file= パラメータで、FLV動画ファイルのURLを指定する
autoStart= は、false に設定することを勧める

Webページにプレイヤを表示させるために必要なサーバ上のファイルはつぎのとおり。

mediaplayer.swf と swfobject.js
再生するFLVファイル
再生前に表示する静止画ファイル(jpg)
埋め込みコードを含んだHTMLファイル

２．Internet Video Converter

オープンソースのFFmpeg, FLVtool2などのGUIで、Webビデオのダウンロード、再生、video変換およびFLV変換ができる。Memo　このソフトの「Video to Flash」機能を使うと、変換と同時に再生プレイヤのHTMLも作成してくれる。再生プレイヤは三種類あり、変換前に選択する。ＦＬＶ再生のＨＴＭＬコードの一例を示す。Demo1 Demo2

非商用の個人利用に限り無償で利用できる。プレイヤーの表示サイズや色、自動再生の可否といったカスタマイズができる。作者の設定用Webページを使って、埋め込み用コードを生成することもできる。

組み込み用スクリプト　⇒デモ Demo

<div id="wmvplayer"></div>
<script type="text/javascript" src="embed/silverlight.js"></script>
<script type="text/javascript" src="embed/wmvplayer.js"></script>
<script type="text/javascript">
var cnt = document.getElementById("wmvplayer");
var src = 'embed/wmvplayer.xaml';
var cfg = {
file:'upload/afraid.wmv',
image:'upload/afraid.jpg',
height:'260',
width:'320'
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>

詳細はこちらを参照。高画質・高速で有名だが、今年2月 Stage6サイトが閉鎖された。先行きが不透明になった。

　インターネットTV放送サービスBrightCoveアカウントを開設すると、個人放送用のプレイヤ（数種類）の設定ができ、プレイヤごとに放送する番組を編成できる。番組編成用のコンテンツはBrightPod（だったかな？）を使ってアップロードする。一本１００MBまでOKで、本数に制限はない。YouTubeに似たサービスだが、個人用の放送チャネルやプレイヤを設定できる特徴がある。またFLV変換が速く、映像もきれいである。プロの放送局も利用し、日々の放送に活用している。

組み込み用スクリプト　⇒デモ Demo

<div style="display:none"> 
2006 Yokohama; Travel; USA; August 2003; Travel; USA; 26 January 2007 ; friend; Sigma 44 Alumni <a href="http://link.brightcove.com/services/link/bcpid494808757">http://link.brightcove.com/services/link/bcpid494808757</a><a href="http://www.brightcove.com/channel.jsp?channel=428902854">http://www.brightcove.com/channel.jsp?channel=428902854</a>
</div>
<script src="http://admin.brightcove.com/js/experience_util.js" type="text/javascript"></script>
<script type="text/javascript">
// By use of this code snippet, I agree to the Brightcove Publisher T and C
// found at http://www.brightcove.com/publishertermsandconditions.html.

var config = new Array();

config["videoId"] = null;
config["videoRef"] = null;
config["lineupId"] = null;
config["playerTag"] = null;
config["autoStart"] = true;
config["preloadBackColor"] = "#FFFFFF";

config["width"] = 790;
config["height"] = 500;

/* do not edit these config items */
config["playerId"] = 494808757;
createExperience(config);
</script>

　MySpaceにアップロードしたビデオを再生するコード

組み込み用スクリプト　⇒デモ Demo

ストリーミング高画質再生・保存　　ストリーミングの保存方法や役立つ情報・裏技を大公開
FLV Player 2.0.24　Cnet downloadレビュー
PEGASYS WEB FLV Player 　TMPGEnc Movie Plug-in FLV4などで作成したFLVファイルを再生できる。4:3と16:9固定サイズだけサポートしている。
FLV動画のWindows用再生ソフト　Webブラウザ上で、Flashを利用した動画を配信する方式を説明している。
FLV Player v2.0 build 23　cowscorpion.comダウンロードサイト
Any FLV Player　Webでの再生も可能？　ビデオコンバータの紹介もある。

■ FLV Web Player

１．JW Player

２．Internet Video Converter

■ WMV Web Player

■ DivX Web Player

■ BrightCove Player

■ MySpace Player

※ 参考サイト