HTMLにflv,wmvのムービープレーヤーを埋め込む JW Player5 他
ホームページで利用するVideoプレーヤーには旧くはMicrosoft社のWindowsMediaPlayerに始まり、Macromedia社のFlashPlayer、QuickTime、RealPlayerと沢山あります。
ここで紹介するのは個人のホームページで使う使用例で、商用のものは対象外です。動画のソースは自分で作り、ムービープレーヤーにはその動画のソースを再生できるものを選びます。
私の場合は家庭用ビデオの編集でMPEG2作成を長い間やっていたので編集になれがありますので一旦MPEGで作りFLVに変換することを前提にしました。
ムービープレーヤーには次の２種類があります。一つは大手の企業（例えばMacromedia）が提供し、HTML上でそこにリンクし使うものです。他方はフリーソフトでムービープレーヤー自体が提供されています。これを自分のサイトに保存してソースもプレーヤーも自前の形です。
後者こそ個人のホームページ作りの醍醐味になります。ここではソースをFLVとWMVだけに絞り紹介します。FLVの理由はYouTubeがそうなように、すでにインターネット上の動画ソースとして主流になっているからです。
WMVはかってのエースですから比較のために取り上げました。私はWMP11を使用中ですが「何時の間にか音声が出なくなり、何時の間にか復旧している」などとにかく使い勝手が悪く、HTMLでのWMPも不具合が多いようです。WMV用にはJW Playerは使えませんので、Microsoft社のものを紹介します。なおJW Playerのフォーラムを見るとWMV用の新たな開発計画はないとのことです。
3.JW Player5: Flash用 Embed(プレイリストなし）
4.JW Player5; Flash用 Javascript(プレイリストなし）
5.JW Player5: Flash用 Embed(プレイリスト表示あり・自動演奏・ランダム再生）
6.JW Player5; Flash用 Javascript(プレイリスト表示あり）
7.JW Player5; Flash用 Javascript(プレイリスト表示なし,主画面表示,ランダム再生）
8.JW Player5; Flash用 Javascript(プレイリスト表示,Skin使用,デザインあり）
9.JW Player1.1; WMV用 Video Player by Javascript,利用不可
10.Windows Mediaplayer by Microsoft
11.参考；本家Macromediaを利用したswf再生の例
1. Adobe社（Macromedia）のFLVとSWF
誰でも知っているpdfファイルで有名なAdobe社がMacromediaを吸収し公式にはflash関連もAdobe社になっていますが、後で出てきますがこの関連のリンク先はmacromedia.comになっています。
FLVは動画像ファイルフォーマットの一種で、今やインターネット上の動画配信の主役です。他方SWFは歴史が旧く、一言で云えばHTMLの中に各種イメージとJabaScriptが組み込まれ、プログラムによって動作するので昔はアニメーションの主役でした。いまは更に進化し多彩な表現のホームページの顔として使われています。SWFは動画のファイルではありません。
FLV、SWFファイルの再生は私のパソコンの中だけでも「VLCMediaPlayer」「MediaPlayerClassic」「DivXPlayer」「NeroShowTime」などで再生できますしブラウザーも「Opera」「Firefox」などで再生できました。
インターネット上の動画配信はファイルの再生だけではなくHTML上で動作する必要があります。このため商用ベースの動画配信では製造元にリンクしてプラグインしプレーヤーを入手しHTMLに埋め込みます。
ここで紹介する個人ベースのフリーソフトのプレーヤーはSWFファイルです。動作を決める色々な要素をパラメータとかPlayListで取り込んでFLVを再生します。
埋め込むには「Embed」タグを使いますが、私はW3C合格主義でやってきたものですから減点され困ってしまいます。止むを得ずJavaScriptでEmbedタグを使わない方法も勉強しました。
個人のホームページではソースを多数用意しジュークボックス的なランダム再生のニーズがあると思います。これにはembedだけで対応するのは限界があります。
2. HTMLで使えるフリーのムービープレーヤー
多くのものが世の中にはあると思います。私のフリーソフトの選定基準で選んだ二つのソフトを紹介いたします。何れも世界中の多くのファンに支持され、甲乙付けがたい存在です。
FLVに関しての仕組みは基本的に同じでswfファイルのプレーヤーにパラメーター、Configファイル、プレイリストなどでJavaScriptの動作条件を定めています。
2.1JW Player5
Flash Playerは普通はviralのチェックを外したもの（ファイル名mediaplayer.zip)とWMV用が必要ならSilverlight Playerを（ファイル名wmvplayer.zip)ダウンロードします。
Flash Playerはembedタグで実装するのとJavaScriptで行う二つの方法があり動作は同じです。ホームページにはSetup Wizardを始め英文ですが分らないことはない仕組みになっています。
高機能ですからフルに使いこなすには大変だと思いますが、ここでは初心者としての実例を紹介します。普通の使い方であれば下に示す実例が理解できれば充分かと思います。
- プログラムの本体はplayer.swf（85KB)です。swfファイルですからバージョン管理がありません。自分でバージョン管理が必要です。
- param name、flashvars等でplayer.swfを制御します。昔のiniファイルみたいなものですべてtextベースです。プレイリストを使う場合に注意するのはこの設定が最後に読み込まれるので最上位の設定になります。
- 相対パスですがHTMLから見た場合とplayer.swfから見た場合の2種類があり動作しなかったら先ずここから疑って見てください。
- プレイリストの文字コードはUTF-8で保存してください。日本語が表示できません。
2.2Free-Video-to-Flash-Converter付属のプレーヤー
私の場合は画像の主力がMpeg2でそこからflvを作るツールとして「Free Video to Flash Converter Ver4.2.3.69」使っています。
下のホームページに詳細がありますが、flvに変換するときにFlvプレーヤーはどれにしますか、スキンは？の選択画面があり、出力するとflvファイルだけでなく「HowToUseFlash_Example.htm」と言うファイルが自動的に生成されHTML文まで準備されます。
使い易いという面では断然上ですが、物足りなさも多々あり何に使うかが問題です。私はJW Playerだけにしています。
3. JW Player5: Flash用 Embed(プレイリストなし）
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="260" id="n3a" name="n3a"> <param name="movie" value="video/player.swf" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="file=flv/earth05.flv&image=video/flv/IMG_0844.JPG&autostart=false&quality=true&repeat=none" /> <embed type="application/x-shockwave-flash" id="n3b" name="n3b" src="video/player.swf" width="320" height="260" bgcolor="undefined" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="file=flv/earth02.flv&image=video/IMG_0844.jpg&autostart=false&quality=true&repeat=none" /> </embed> </object>
1. autostart=false,quality=true,repeat=noneは既定値で本来は記述の必要がありません。
2. flashvarsの相対パスはflvはplayer.swfから、jpgはHTMLからです。
3. "wmode" value="transparent"には"opaque"もあります。好みです。
4. JW Player5; Flash用 Javascript(プレイリストなし）
<script type='text/javascript' src='../js/swfobject.js'></script>
<script type='text/javascript' src='../js/silverlight.js'></script>
<script type='text/javascript' src='../js/wmvplayer.js'></script>
<div id='n4a'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('video/player.swf','mpl','320','260','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','flv/earth04.flv');
so.addVariable('image','video/IMG_0844.JPG');
so.addVariable('autostart','false');
so.addVariable('repeat','none');
so.write('n4a');
1. swfobject.jsが必要です。
2. ('autostart','false'),('repeat','none'),は既定値で本来は記述の必要がありません。
3. flashvarsの相対パスはflvはplayer.swfから、jpgはHTMLからです。
5. 5.JW Player5: Flash用 Embed(プレイリスト表示あり・自動演奏・ランダム再生）
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="570" height="240" id="n5a" name="n5a"> <param name="movie" value="video/player.swf"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="wmode" value="transparent"> <param name="flashvars" value="playlistfile=video/playlist1.xml&playlist=right&playlistsize=250&autostart=true&shuffle=true" /> <!-- playlisitを使わない場合はfile=video/abcd.flv&image=video/xyz.jpgでスタート画面に好みの画像を表示できる。 playlisitを使うとplaylistが上書きするので、playlistにimageを登録する。本体画面に表示させる画像とpaylistのサムネイル を同時に制御することは出来ない。いまのところ・・・です。 --> <embed type="application/x-shockwave-flash" id="n5a" name="n5a" src="video/player.swf" width="570" height="260" bgcolor="undefined" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="playlistfile=video/playlist1.xml&image=video/IMG_0844.jpg&playlist=right&playlistsize=250&autostart=true&shuffle=true" /> </embed> </object>
1. playlistを右横表示、size=250に指定したのでwidth="570"に設定。playlistの内容によりsize調整をします。
2. autostart=true更にshuffle=trueにしている例です。IEではobjectの内容でMojilla他ではembedの内容でちゃんと動きます。
6. JW Player5; Flash用 Javascript(プレイリスト表示あり）
<script type='text/javascript' src='../js/swfobject.js'></script>
<script type="text/javascript">
var so = new SWFObject("video/player.swf","mpl","570","260","9");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addVariable("playlistfile","video/playlist1.xml");
so.addVariable("playlistsize","250");
so.addVariable("playlist","right");
so.addVariable("autostart","false");
so.addVariable("shuffle","none");
so.addVariable("repeat","none");
so.write("n6a");
</script>
1. playlistを右横表示、size=250に指定したのでwidth="570"に設定。playlistの内容によりsize調整をします。
2. ("autostart","false"),("shuffle","none"),("repeat","none"),は既定値ですから本来は設定の必要はありません。
3. ここで使っているplaylist1.xmlの内容は下図です。文字コードをUTF-8にすることが必要です。パラメータの順番が決まっています。
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>日の出</title>
<creator>映画Earthより</creator>
<info>http://www.oji21.com</info>
<annotation>The Earthより拝借</annotation>
<location>flv/earth01.flv</location>
<image>video/flv/earth1.jpg</image>
</track>
<track>
<title>植物の成長</title>
<creator>映画Earthより</creator>
<info>http://www.oji21.com</info>
<annotation>The Earthより拝借</annotation>
<location>flv/earth02.flv</location>
<image>video/flv/earth2.jpg</image>
</track>
<track>
<title>雲と台風</title>
<creator>映画Earthより</creator>
<info>http://www.oji21.com</info>
<annotation>The Earthより拝借</annotation>
<location>flv/earth03.flv</location>
<image>video/flv/earth3.jpg</image>
</track>
<track>
<title>ヒマラヤ越え</title>
<creator>映画Earthより</creator>
<info>http://www.oji21.com</info>
<annotation>The Earthより拝借</annotation>
<location>flv/earth04.flv</location>
<image>video/flv/earth4.jpg</image>
</track>
<track>
<title>エンジェルフォール</title>
<creator>映画Earthより</creator>
<info>http://www.oji21.com</info>
<annotation>The Earthより拝借</annotation>
<location>flv/earth05.flv</location>
<image>video/flv/earth5.jpg</image>
</track>
</trackList>
</playlist>
7. JW Player5; Flash用 Javascript(プレイリスト表示なし,主画面表示,ランダム再生）
<script type='text/javascript' src='../js/swfobject.js'></script>
<div id="n7a">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject("video/player.swf","mpl","320","260","9");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addVariable("playlistfile","video/playlist1.xml");
so.addVariable("playlistsize","250");
so.addVariable("playlist","none");
so.addVariable("autostart","false");
so.addVariable("shuffle","true");
so.addVariable("repeat","none");
so.write("n7a");
</script>
1. playlistは前項と同じものを使っています。("autostart","false"),("shuffle","true")ですからページを開く度に違う画像が表示されます。またナビボタンの前後をクリックすればシャッフルされて表示されます。
2. playlistのimageをtrackですべて統一すれば、主画面には同じ画像が常に表示されます。そこで再生すればランダムに再生され何が出てくるのか分らない使い方が出来ます。("autostart","True")で使えば違う演出が出来ます。
8. JW Player5; Flash用 Javascript(プレイリスト表示,Skin使用,デザインあり）
<div id="n8a">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject("video/player.swf","mpl","320","320","9");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","transparent");
so.addVariable("playlistfile","video/playlist1.xml");
so.addVariable("playlist","bottom");
so.addVariable("playlistsize","140");
so.addVariable('skin','video/stylish_slim.swf');
so.addVariable("autostart","false");
so.addVariable("shuffle","false");
so.addVariable("repeat","none");
so.addVariable('backcolor','#C09000');
so.addVariable('frontcolor','#1A69B9');
so.addVariable('lightcolor','#1A69B9');
so.addVariable('screencolor','ffffff');
so.addVariable('controlbar','over');
so.addVariable('stretching','fill');
so.addVariable('icons','false');
so.write("n8a");
</script>
1. playlistは前項と同じものを使っています。ファミリーコーナーで実使用しているものでデザインはそのページに合わせています。
2. ソースは勿論これではありませんが使い方は同じです。stylish_slim.swfと言うSkinを使っているのでplaylistの表示がシンプルです。
3. ('controlbar','over');('stretching','fill');と色使いがデザインのポイントになっています。
9. JW Player1.1; WMV用 Video Player by Javascript,利用不可
<script type='text/javascript' src='../js/silverlight.js'></script>
<script type='text/javascript' src='../js/wmvplayer.js'></script>
<div id="n8a">This text will be replaced</div>
<script type="text/javascript">
var cnt = document.getElementById("n9a");
var src = "video/wmv/wmvplayer.xaml";
var cfg = {width:"320",height:"260",file:"video/wmv/bonita01.wmv",image:"../img/IMG_0844.jpg",autostart:"false",repeat:"false"};
var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>
1. silverlight.js、wmvplayer.jsを実装します。wmvplayer.xamlがプレーヤーでcfgで各種パラメータを渡します。プレイリストはありません。
2. MicrosoftのSiverlightがインストールされている環境が必要ですが、これにはVersionがあり1.1にしか対応できていません。ブラウザーがIE8の場合インストールされているSilverlightはVer2で更にVer3が予定されています。
3. このためこのページをIE8で見るとが表示され、インストールしようとしてもすでにあるのでエラーになり実際にはIE8では使えません。
10. Windows Mediaplayer by Microsoft
<object class="flv" id="MediaPlayer2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"
type="video/x-ms-wmv" width="320" height="280">
<param name="filename" value="video/wmv/playlist.wvx" />
<param name="enableContextMenu" value="false" />
<param name="windowlessvideo" value="true" />
<param name="autostart" value="false" />
<param name="showFrame" value="true" />
<param name="invokeURLs" value="false" />
<param name="stretchtofit" value="false" />
<param name="url" value="video/wmv/playlist.wvx" />
<param name="uimode" value="full" />
<param name="showcontrols" value="0" />
<param name="animationatstart" value="0" />
<param name="transparentatstart" value="1" />
<param name="showaudiocontrols" value="1" />
<param name="showtracker" value="0" />
<param name="showdisplay" value="0" />
<param name="showstatusbar" value="1" />
<embed
name="WMP"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="video/wmv/playlist.wvx"
width="320"
height="280"
autostart="0"
showcontrols="1"
uiMode="full" >
</embed>
</object>
1. objectタブでIEが、embedでその他のブラウザーが動作します。但しWindowsMediaPlayerの動作が安定しないと言われています。低精細画像はFLVがすでに主役でありWMVをあえて使う意味は無くなっています。
2. 高精細画像も圧縮率の関係からMicrosoftの出番は無くなってきています。私はどうしても必要なときは「JW Player; WMV Video Player」を使うことにしています。
3. ここで使っているplaylist.wvxの内容は下図です。文字コードはShift-JISです。
<ASX version="3">
<Entry>
<Ref href="julia01.wmv"/>
</Entry>
<Entry>
<Ref href="bonita01.wmv"/>
</Entry>
</ASX>
11. 参考；本家Macromediaを利用したswf再生の例
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" style="visibility:visible" align="middle" width="348" height="216" id="previewDB2" > <param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="noscale" /> <param name="quality" value="high" /> <param name="movie" value="video/swf/tree2_r.swf" /> <param name="bgcolor" value="#fff" /> <param name="FlashVars" value="" /> <embed type="application/x-shockwave-flash" align="middle" width="348" height="216" name="previewDB2" allowScriptAccess="always" allowFullScreen="true" scale="noscale" quality="high" src="video/swf/tree2_r.swf" bgcolor="#fff" FlashVars="" > </embed></object>
12. 参考；YouTube再生の例
<object style="height: 486px; width: 600px"> <param name="movie" value="http://www.youtube.com/v/M9OXSfweSF4&hl=ja_JP&fs=1"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/M9OXSfweSF4&hl=ja_JP&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="600" height="486"> </embed></object>