Silverlightでムービーをストリーミング
Windows Media Serviceを使って動画を配信する場合、従来ならば、Windows Media Playerを使わなければなりませんでした。さらに、Windows Media PlayerはWindowsではActiveXとして提供されているものの、Firefoxなどでは、プロパティやイベントによる細かな制御が出来ないため、IE限定などにせざるを得ませんでした。当然、Macでは・・・というか、Windows Media Player自体が既にIntel Macに非対応ですし、Flip4Macを使ってQuickTimeで再生したとしても、やっぱり、制御は出来ませんでした。
そこに登場したSilverlightですが、Windows、MacとOSを選ばないだけでなく、現在でもIE, Firefox, Safariに対応しています。さらに、"Silverlight, coming soon to a browser near you"によれば、すぐにOperaにも対応する模様。当然、Linux上でもMoonlightによる対応がそこまで見えている状況。Silverlight自体は、別にムービーを再生するだけの代物ではないんですが、強力すぎるぐらいの代役となります。
mmsとかrtspが使えない?
とはいうものの、一筋縄ではいかないようです。
<Canvas Width="800" Height="400" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="media" Source="rtsp://somewhere/pubpoint/" Width="320" Height="240" /> </Canvas>
とか書いても全く認識してくれません。ちなみに、IE7で見る場合、ローカルでSilverlightをテストすると、セキュリティの関係で外界(インターネット)のリソースにアクセスできないので、それにはご注意。
で、何が悪いのかというと、そもそもSilverlightがmmsとか、rtspに対応していないような雰囲気。SDKによれば、
Supported Protocols The following web protocols are supported. http https mms
とあるのですが、mmsはどうやら動いていなさそうです。ということで、http/httpsでの運用をせざるを得ないわけですが、海外のサイトでいろいろと調べてみたところ、これも、ストリーミングの制御をちゃんと行うのであれば、多少面倒な手順を踏まないといけなさそうです。とはいえ、分かってしまえば大したことではないのですが、まず、Windows Media Serviceで、「WMS HTTP サーバー制御プロトコル」のポートを80以外に設定しないといけません。
次に、参照する側(XAML)ですが、
<MediaElement x:Name="media" Source="http://somewhere:8080/pubpoint/" Width="320" Height="240" />
のようにポートを明示的に指定しないといけません。とはいえ、これだけです。HTTPなので、RTSP(UDP)ほどのレスポンスは得られないことがありますが、逆にHTTPじゃないとプロキシにはじかれたりということもあるので、これは妥協すべき点なのでしょう。
ランダムシークしてみる
さきほどのXAMLが、
function createSilverlight(parent) { Silverlight.createObject( "test.xaml", parent, "mySilverlightPlugin", { width:'800', height:'400', inplaceInstallPrompt:false, background:'white', background:'#D6D6D6', isWindowless:'false', framerate:'24', enableFramerateCounter:false, version:'1.0'}, {onError:null, onLoad:null, onResize:null}, null); }
のように、mySilverlightPluginという名前でロードされている場合なら、
document.getElementById("mySilverlightPlugin").content.findName("media").Position = "00:12:00";
のようなJavaScriptコードで、12分00秒のところまで移動できる。
当然、Silverlightのイベントだったら、senderというインスタンスが得られているので、
function media_back(sender, args) { sender.findName("media").Position = "00:12:00"; }
で十分。