FLVをWEB上で再生する（その2） FLVをWEB上で再生する（その2）

February 17, 2008 - [ ][ ][ ]


以前、FLVファイルをWEB上で再生するためのツールを紹介しました。

FlashVideoをWEB上で再生する。 - NOBODY:PLACE - MUTTER

flowplayerというプログラムを使ったものだったのですが…
どこかでプログラムがコンフリクト（衝突）しているらしく、
このブログ上では上手く動かないようです。
FireFoxでは問題ないんですが、IEだと次のJavaScriptで止まってしまう。


理由はLiteboxかもしれないしはてなスターかもしれませんし、
prototype.jsかもしれませんがよく分かりません。

つーことで、他の場所で使っている、
超多機能かつシンプルな他のプレイヤーを使うことにしてみます。


一応、テストでは動いたので、このブログでも動く前提で今から文章書きますが、
もしかしたらアップしてみてみたら動いて無くてやっぱダメだった…という
残念なエントリになっている可能性もありますが、まぁ兎にも角にもやってみましょう。
使ったツールはこちら。

JW FLV Media Player


FLVだけでなく、画像、mp3などもカバーする多機能プレイヤーです。
にもかかわらず本体は非常に小さく（34KB）、
構成ファイル数も僅か2ファイル（しかも1つは有名なJavaScriptライブラリ）という
驚異的なシンプルさです。



1. インストール

ダウンロードしてきたファイルを解凍すると、
本体プログラムとソース、解説ファイル、サンプルなどが出てきます。
この中で必要なのは以下の2ファイル。

  • mediaplayer.swf
  • swfobject.js

それぞれ適当な場所にアップロードしてください。
後で指定することが出来るので管理しやすい場所で良いかと思います。

とりあえずサンプルでは、以下のように配置してみました。





2. コードを入力する

使い方には色んなパターンがあって、動画1つを紹介することも出来るし、
音楽プレイヤーとしても使えるし、
サイト内の動画を全て見せるような使い方も出来ます。
（詳しくは同梱のREADME.HTMLを見てみてください。）


ココでは、YouTubeのプレイヤーみたいな使い方をと言うことで、
こんなコードを挿入してみます。

<div id="player0"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/mediaplayer.swf","mediaplayer","320","262","7");
  s1.addParam("allowfullscreen","true");
  s1.addVariable("width","320");
  s1.addVariable("height","262");
  s1.addVariable("file","動画ファイル");
  s1.addVariable("image","サムネイル画像");
  s1.write("player0");
</script>


動画ファイル、サムネイル画像を設定してやると、
こんな感じになります。


Get the Flash Player to see this player.


簡単ですね。


ちなみにコントロールバーの高さは22pxです。
なので、コード内の高さは動画の高さ+22pxを指定してやると吉です。



3. 発展的な使い方（上級者向け）

以上で、解説そのものは終わりなのですが、
このプログラムには以下のような機能が備わっています。




プレイリストの場合一般的な3つの形式（XSPF/RSS/ASX）に対応しています。

詳しくは解説しませんが、簡単にサンプルを書いておくと。
例えば以下のようなプレイリストを用意して、


<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
  <track>
    <title>組曲「ニコニコ動画」1.5倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_150.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  <track>
    <title>組曲「ニコニコ動画」2倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_200.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  <track>
    <title>組曲「ニコニコ動画」4倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_400.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  </trackList>
</playlist>


以下のように食べさせると、


<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
  var so = new SWFObject("/swf/jw/mediaplayer.swf","mediaplayer","208","142","7");
  so.addParam("allowfullscreen","false");
  so.addVariable("file","/mp3/kumikyoku_niconico.xml");
  so.addVariable("enablejs","true");
  so.addVariable("javascriptid","mpl");
  so.addVariable("displayheight","0");
  so.addVariable("width","208");
  so.addVariable("repeat","list");
  so.addVariable("shuffle","false");
  so.write('player');
</script>


こんな感じで表示されます。


Get the Flash Player to see this player.



なお、スキンの改造も可能です。
とりあえず背景色をいじるとこんな感じ。


Get the Flash Player to see this player.


JavaScriptについては…こんな感じかな。


Get the Flash Player to see this player.

» 2曲目を再生


クリックで2曲目に飛びます。
何でか、IE6では動きませんが。
いや、動いてますね。FLASHのバージョンかなぁ。詳細不明。



ともかく、かなり汎用性に富んだプログラムなので、
アイディア次第でかなり遊べるんじゃないかと思います。

よろしければお試しアレ。



…というわけで、無事に動きました。
良かった良かった。

COMMENTS

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

コメントの書き込み方について。