Web Player

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

 

■ FLV Web Player

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

1.JW Player

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

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

Object コード例 ⇒デモ Basic Advanced(未完)

<object type="application/x-shockwave-flash" width="320" height="260"
  wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv&autoStart=false">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>

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

2.Internet Video Converter

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

<object type="application/x-shockwave-flash" data="ivc_flvplayer_03.swf?videofile=flower.flv" width="490" height="400" id="ivc_flvplayer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="ivc_flvplayer_03.swf?videofile=flower.flv" />
<param name="menu" value="true" /><param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" /><embed src="ivc_flvplayer_03.swf" menu="true" quality="best" bgcolor="#ffffff" width="490" height="400" name="ivc_flvplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

■ WMV Web Player

非商用の個人利用に限り無償で利用できる。プレイヤーの表示サイズや色、自動再生の可否といったカスタマイズができる。作者の設定用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>

■ DivX Web Player

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

■ BrightCove Player

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

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

<!-- Start of Brightcove Player -->
<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>
<!-- End of Brightcove Player -->

■ MySpace Player

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

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

<embed src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=22054439&v=2&type=video" type="application/x-shockwave-flash" width="430" height="346"></embed>
HomeSNSBlog|Gallery|Tools|About|Help