IIS 7.0 用 Web プレイリスト - 各種メディアプレーヤーでのプレイリストの使用

[アーティクル]
12/21/2009

公開日: 2008 年 2 月 27 日 (作業者: vsood (英語))

更新日: 2009 年 9 月 9 日 (作業者: vsood (英語))

必要条件

IIS 7.0 用 Web プレイリスト拡張機能をインストールするには、Web プレイリストの Readme (英語) で、インストールに関する注意 (Installation Notes) をお読みください。

Windows Media Player

Windows Media Player 11 (WMP) で ISX (Web プレイリスト) ファイルを再生するには、以下の手順に従います。

1. Windows Media Player 11 を開きます。

2. [ファイル] メニューの [URL を開く] をクリックします。

Ee890787.wp13(ja-jp,TechNet.10).jpg

3. .isx ファイルの URL を入力し、[OK] をクリックします。

Ee890787.wp14(ja-jp,TechNet.10).jpg

Silverlight

Silverlight には、ASX ファイルを再生できる MediaElement オブジェクトが備わっています。このオブジェクトでは、.isx ファイルの URL が要求されると ASX 応答が送信されるので、Web プレイリストハンドラーとの連携がスムーズです。したがって、Silverlight で Web プレイリストを再生するには、この MediaElement を使用する必要があります。

MediaElement

MediaElement は、オーディオおよびビデオコンテンツの再生方法を認識する、Silverlight のレンダリングエンジンのオブジェクトです。

メディアをページに追加するには、マークアップに MediaElement を追加し、再生するメディアの URI (Uniform Resource Identifier) を指定するだけです。次の例では、MediaElement を作成し、その Source プロパティをビデオファイルの URI に設定しています。ページが読み込まれると、MediaElement の再生が開始されます。

<Canvas  xmlns="https://schemas.microsoft.com/client/2007"  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"  Width="300" Height="300">       
    <MediaElement x:Name="media" Source="http://myserver/mymedia/media.isx" Width="300" Height="300" /> 
</Canvas>

MediaElement オブジェクトでは、Windows Media ビデオ (WMV)、Windows Media オーディオ (WMA)、および MP3 ファイルを再生できます。サポートされる形式とプロトコルの詳しい一覧については、「サポートされるメディア形式とプロトコル」を参照してください。

Silverlight での PARAM タグの使用

Silverlight の MediaElement でプレイリストを再生するには、MediaElement の Source に ISX ファイルの場所を指定するだけです。こうすると、プレイリストのエントリが指定順序どおりに再生されます。クライアントサイトで進む/戻るボタンの外観やシークバーを制御する場合は、MediaElement に関連付けられている PARAM タグにアクセスする必要があります。既定では、Silverlight では PARAM タグが無視されます。 Web プレイリストに関係する PARAM タグは、CANSKIPFORWARD、CANSKIPBACK、および CANSEEK です。また、ENTRY の CLIENTSKIP 属性も考慮する必要があります。 CLIENTSKIP があると、Silverlight では、MediaElement でシークが無効にされます。

どの PARAM タグの場合も、Silverlight アプリケーションで Attributes を使用して簡単にアクセスできます。次は、属性の読み取り方法を指定する簡単なコード部分です。

function onMediaOpened(sender, args) 
{   
    // Variable to hold the MediaAttribute.     
    var attribute;
    // Get the MediaAttribute named Title
    try     {
        var attributesCollection = sender.Attributes;
        attribute = attributesCollection.getItemByName("Title");
    }
    catch(errorObj)
    {
        alert(errorObj.message);
    }
    // Display the Value of the MediaAttribute
    if(attribute != null)
    {
      alert("The title of the track is: " + attribute.value);
    }
}

属性 CANSKIPFORWARD、CANSKIPBACKWARD、および CANSEEK を読み取ったら、それに応じてコントロールを有効または無効にすることで、UI の動作を簡単に制御できます。既定では、プレイリスト内の次のエントリへスキップするという概念は Silverlight に実装されていません。この制限を解消する 1 つの方法としては、現在のエントリの終わりまでシークし、次のエントリを自動再生するという方法があります。

Silverlight リファレンス

MediaElement - https://msdn2.microsoft.com/en-us/library/bb980141.aspx
Attributes - https://msdn2.microsoft.com/en-us/library/bb979671.aspx

Flash Player

Web プレイリストの .isx ファイルにクライアント側からアクセスすると、ASX ファイルが生成されます。Flash で Web プレイリストファイルを再生するには、Flash に ASX ファイルの解析機能を追加する必要があります。 ASX ファイルは単なる XML ファイルです。 Flash Player にこの機能を追加するには、Action Script (.AS) を記述します。スクリプトでは、Web 要求から ASX 応答を読み込んだ後、その応答を解析して関連エントリと PARAM タグを取得し、それらを UI 要素のメディア再生コントロールにもう一度結び付けます。

以下に示すいくつかのクラスは、.ISX プレイリストファイルの取得要求に対して Web プレイリストモジュールから送信される ASX 応答を解析するのに役立ちます。これは単なる例であり、1 つの方法として参照してください。

import mx.utils.Delegate;
import mx.events.EventDispatcher;
import sampleplayer.communication.PlaylistEntry;

class sampleplayer.communication.Playlist {

 public var addEventListener:Function, removeEventListener:Function;

 private var dispatchEvent:Function;

 private var _xml:XML;
 private var _title:String;
 public var _entries:Array;

 function Playlist() {
  trace("Playlist instantiated");
  _xml = new XML();
  mx.events.EventDispatcher.initialize(this);
 }

 public function load(sServerPath:String):Void {
  _entries = new Array();
  _xml.onLoad = Delegate.create(this, onLoad);
  _xml.load(sServerPath);
 }
 
 public function clear()
 {
  _entries.length = 0;
 }

 private function onLoad(success:Boolean):Void {
  if (success) {
   var index:Number = 0;
   //trace(_xml.childNodes);
   for (var node:XMLNode = _xml.firstChild.firstChild; node != null; node=node.nextSibling) {
    switch (node.nodeName) {
     case "ENTRY" :
      var entry:PlaylistEntry = new PlaylistEntry(node);
      _entries[index++]= entry ;
      break;
     case "TITLE" :
     //process the playlist title - sample code
      _title = node.nodeValue;
      break;
    }
   }
   trace("Entry count:"+ _entries.length);
   trace(_entries);
  }
  dispatchEvent({type:"onPlaylistLoaded", target:this, status:success});
 }

} 

class sampleplayer.communication.PlaylistEntry {

 public var title:String;
 public var path:String;
 public var canSeek:Boolean;
 public var canSkipForward:Boolean;
 public var canSkipBackward:Boolean;


 function PlaylistEntry(node:XMLNode) {
  trace("Entry instantiated");
  canSeek = true;
  canSkipForward = true;
  canSkipBackward = true;
  load(node);
 }
 private function load(node:XMLNode) {
  for (var temp:XMLNode = node.firstChild; temp != null; temp=temp.nextSibling) {
   switch (temp.nodeName) {
    case "REF" :
     path = temp.attributes.HREF;
     break;
    case "PARAM" :
     var name = temp.attributes.NAME;
     var value = temp.attributes.VALUE;
     switch (name) {
      case "CANSKIPBACK" :
       canSkipBackward = (value == "NO");
       break;
      case "CANSKIPFORWARD" :
       canSkipForward = (value == "NO");
       break;
      case "CANSEEK" :
       canSeek = (value == "NO");
     }
     break;
   }
  }
  
  if(node.attributes.CLIENTSKIP == "NO")
  {
   canSeek = false;
   canSkipForward = false;
   canSkipBackward = false;
  }
 }
 
 public function toString():String
 {
  return "Entry ref=" + path + " canSeek=" + canSeek + " canSkipF="+ canSkipForward + " canSkipB=" + canSkipBackward;
 }
}

上の Playlist クラスは、ASX ファイルの解析でプレイリストのエントリを取得するのに役立ちます。PlaylistEntry クラスは、各エントリの解析で適切な PARAM タグを取得し、UI のプレーヤーコントロールを適切に設定するのに役立ちます。このコードでは、Flash SDK で提供される XML の解析機能を利用しています。 Playlist クラスでは、ASX が解析されてすべてのエントリが 1 つの配列に格納されます。Playlist Entry では、この配列が使用されて各エントリに適切なデータが解析されます。

ここに挙げたクラスは、Flash で提供される NetConnection、NetStream、および Video クラスと共に使用する必要があります。次は、この使用方法を示すコード部分の例です。実際の実装にはさまざまな方法が考えられます。

nc = new NetConnection();    //create a connection
nc.connect( null );     //null connection for progressive download
ns = new NetStream(nc);//create a stream 
video.attachVideo(ns); //pipe stream to this video object
ns.setBufferTime("10"); // Sets the initial buffer
ns.play("a.flv");

IIS 7.0 用 Web プレイリスト - 各種メディア プレーヤーでのプレイリストの使用