MediaPlayer制御法
ホームページにBGMを付けたり、ビデオを上映すると、多くのパソコンはMediaPlayerが起動して実行してくれます。 しかし、それらの制御はプレーヤーのコントロールバーに頼ることになり、ページレイアウトに制約となってしまう。 また、お客様が曲やビデオを選択して入れ替える機能はコントロールバーにはない。
そこで、MediaPlayerのコントロールバーを使わずに制御する方法を解説してみます。
  • BGSOUND編

    インターネットエクスプローラ専用のタグですがBGM演奏や音声などの録音再生用に<bgsound>タグがあります。
    書式は

    <bgsound src="サウンドファイル名" loop="繰返し回数">

    です。
    エンドレスに繰返す場合はloop="-1"です。
    このタグはJavaScriptで入り切りとファイルの差し替えができます。

    任意のID名を付けて、ファイルは空にします。

    <bgsound id="bgm" src="" loop="-1">

    次にJavaScriptでファイルを切り替える制御用ボタンを作ります
     <button onClick="bgm.src='bgm1.mid'">1週間</button>
     <button onClick="bgm.src='bgm2.mid'">マイムマイム</button>
     <button onClick="bgm.src=''">停止</button>
    
    ファイル名をブランクにすると、停止しますので、OFFスイッチにもなります。
    それでは、次のボタンで体験してみてください



    曲目が多い場合はボタンの代わりに<select>を使うと実用的です。
     <select onChange="bgm.src=this.value;">
     <option value="bgm1.mid">1週間
     <option value="bgm2.mid">マイムマイム
     <option value="bgm3.mid">エリーゼのために
     <option value="bgm4.mid">トロイカ
     <option value="" selected>停止
     </select>
    
    それでは、次の窓を選択して体験してみてください


  • EMBED編

    上記は、インターネットエクスプローラー以外のブラウザを使っている訪問者にも聞こえるようにするには、動画再生もできるEMBEDタグがあります。
    <embed>タグを使うと、ファイル形式から、使えるプレーヤーを選んで起動させるので、ブラウザの制約が解消できます。
    書式は

    <embed src="サウンドまたはビデオファイル名" autostart="自動スタート可否" loop="繰返し可否" showcontrols="コントロールバー表示可否" width="横幅" height="高さ">

    です。
    可は"true" 否は"false"と書きます。

    具体的には任意のID名を付けて次のように書きます。

    <embed id="vtr1" src="test.wmv" AutoStart="false" Loop="true" ShowControls="false" width="480" height="360">

    のように書きます。
    BGMなどでプレーヤー自体を隠すときはhidden="true"を追加するか width="0" height="0"としてください。


    残念ながら、ファイルを空にして入れ替えることはできないようですが、「開始」「静止」「停止」をJavaScriptで制御出来ます。
    開始はPlay()、静止はPause()、停止はStop()、をID名.につけて送ります。
    具体的にはボタンの場合
    <button onClick="vtr1.Play()">開始</button>
    <button onClick="vtr1.Pause()">静止</button>
    <button onClick="vtr1.Stop()">停止</button>
    
    のようになります。



    ただし、クイックタイムプレーヤーではPause()は効きませんでした。
    さらにネットスケープのメディアプレーヤーは制御自体もできませんでしたので、この程度の制御には使わず、単純に

    <embed src="test.wmv" AutoStart="false" Loop="true" width="480" height="360">


    として、コントロールバーは表示して使った方が無難です。

  • OBJECT編

    メディアプレーヤーのActiveXコントロールをObjectを使ってセットすると いろんな操作が可能になります。
    もちろん、ネットスケープ上でも制御ができますので、これまでの課題はほとんど解消できます。
    それをセットするソースは

     <OBJECT ID="MyPlayer" height="360" width="480"
      CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" >
      <PARAM name="URL" value="">
      <PARAM name="autoStart" value="True">
      <PARAM name="uiMode" value="none">
     </OBJECT>
    

    と書きます。
    このプレーヤーのJavaScriptでの制御は
     document.getElementById("ID名"). の後に次のように書いて実行します。


    開始静止停止閉じる
    命令Controls.Play()Controls.Pause()Controls.Stop()Close()

    また初期セットできる主なパラメーターは

    PARAMname=""value=""現象
    自動起動autoStartTrue
    False
    する
    しない
    コントロールバーuiModenone
    mini
    full
    なし
    簡易
    全機能
    画面モードfullScreenTrue
    False
    フルスクリーン
    録画サイズ
    音量Volume0〜100
    演奏ファイルURLファイル名
    開始位置Controls.CurrentPosition経過秒

    さらに、いろいろなパラメーターがMicrosoftのライブラリー書かれていますので原文(英文)か (infoseekwrb翻訳)で参照して研究してください。
    このパラメータは上映(演奏)中にJavaScriptで操作することもできます。
    書式は

    document.getElementById("ID名").パラメータ名=変更値

    例えば上映(演奏)ファイルを差し替えたければ

    document.getElementById("MyPlayer").URL="test2.wmv";

    のようにすれば、入れ替わります
    音量の場合は

    document.getElementById("MyPlayer").Settings.Volume=50;

    のように .Settings を付けます。
    さらに、プレーヤーの状態を取得することもできます。

    変数名dの値内容
    状態d=PlayState;1
    2
    3
    停止中
    静止中
    再生中
    現位置d=Controls.CurrentPosition;経過秒
    画面モードd=FullScreen;true
    false
    フルスクリーン
    録画サイズ

    たとえば、インターバルタイマーでプレーヤーの状態を監視して、映写が終了したら、次のファイルを連続上映するとか、 映像とBGMを別々のプレーヤーで流し映像ファイルをあわせてBGMも変えるというような操作がプログラムできます。 大きな作品なら、分割上映というようなプログラムも考えられますし。 COOKIEに見終わった位置を記憶させ、翌日続きを見るプログラムも可能になりそうです。

    実際のプログラムは、読者にお任せすることにして、操作のデモを作っておきましたので体験してみてください。
    QPON出演TV&VTR
    このプレーヤーをこのまま使いたい場合は、次のソースを使ってください。
    <script type="text/javascript">
    <!--
    /////文字色,画面背景,操作部色,横幅,高さ,画面色,画面モード
    /////   (モード 0:録画サイズ/1:フルスクリーン / 2:フルスクリーン・停止時非表示
    bgc="#ffffff,#444488,#cccccc,360,270,#ccccff,0";
    dt=new Array();nn=0;
    ///////////ファイル名,音量,タイトル//////////
    nn++;dt[nn]="vtr1.wmv,100,NHK教育TV「パソコン教室」";
    nn++;dt[nn]="vtr2.wmv,20,スカパーTV「デジタル元気人」";
    nn++;dt[nn]="vtr3.wmv,100,NEC「トヨタ本社工場のOA化」";
    //-->
    </script>
    <script type="text/javascript" src="http://www2a.biglobe.ne.jp/~qpon/html/m_player01.js">
    </script>
    
    m_player01.jsを改造する場合は、ここをクリックしてダウンロードしてください。


  • フルスクリーンプレーヤー

    応用ツールを作ってみました
    スカパーTV「デジタル元気人」をフルスクリーンで開く

    スカパーTV「デジタル元気人」をフルスクリーンで開く2
    ソースの必要な方は
    <script type="text/javascript" src="http://www2a.biglobe.ne.jp/~qpon/html/full_player.js">
    </script>
    <a href="JavaScript:full_scr('vtr1.wmv')" title="ダブルクリックで閉じる">デジタル元気人</a>

    <a href="JavaScript:full_open('vtr1.wmv')" title="ダブルクリックで閉じる">デジタル元気人</a>

    太字の部分を自分のデーターに書き換えて使ってください。




    この操作を応用した実用的な、プログラム作品は フォトストーリー連続上映 などを参考にしてください。

  • MOVファイルの変換

    QuickTimePlayer用の「***.mov」というファイルはMediaPlayerでは再生できない。
    変換ソフトにかけて、事前に「***.wmv」に変換しておく必要があります。
    その方法は「MOVファイルの変換」をご覧ください。