Silverlight Streaming がやってきた!
ふたたび Tim Sneath のブログからの情報です。実のところ、(Silverlight 1.1 Alpha のクイックスタートよりも^_^;)こちらをさっさと紹介すべきじゃないかとも思っていたものです。が、ちょっとアレ?と思うところがあったまま、今まで放っておいてしまいました。以下の訳注に書いたとおり、ちょっとしたことだったのですが^_^;
silverlight.live.com に行って、Silverlight Streaming アカウントキーを作成し、ご自身の Silverlight アプリケーションとメディアをアップロードしてください。Silverlight Streaming では、10分まで(訳注: 300kbpsの場合)のビデオなら4GB までのメディアコンテンツをアップロードできます。このストレージは、まさに「理想的」なもので、ファイルはグローバルにキャッシュされます。ここで簡単な使い方の手順を紹介しましょう。
- まず、Expression Media Encoder のトライアル版を入手して、インストールしてください。(※訳注。このとき、インストール後のフォルダ(C:\Program Files\Microsoft Expression\Media Encoder 1.0)の Templates フォルダにある en を ja に変更してください。変更しないと以下の Output タブで表示される Template が選択できません。)
- 適当なビデオをエンコードします。このとき Output タブでプレーヤーのテンプレートを選ぶことができます。(※訳注。テンプレートは、必ず選択してください。また、エンコードを始める前に [Timeline] メニューの [Add Marker] を使って適当なタイミングでマーカーを追加してください。さらに、[Metadata] タブの [Markers] を使って、各行の右側にある [Thumbnail] をチェックしてください。)
- エンコードが終わったら、出力したメディアファイルのあるディレクトリに XAML や JavaScript ファイル、サムネイルなどが含まれているはずです。
- ここで .html、.aspx、.media、.csproj、.config ファイルは削除してください。これらは Silverlight Streaming サービスでは必要ないものです。(※訳注。削除しないとアップロード時に失敗します。)
- Silverlight アプリケーションのためのマニフェストを追加します。Expression Media Encoderのデフォルトプレーヤーでは(私は Glassy を使いました)、以下のマニフェストを使えます。
<SilverlightApp>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>PreviewMedia.js</js>
<js>EmePlayer.js</js>
<js>player.js</js>
<js>startPlayer.js</js>
</jsOrder>
</SilverlightApp>
※アップデート: Silverlight RC 以降に対応したテンプレートでは、以下を使う必要があります。
<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>BasePlayer.js</js>
<js>PlayerStrings.js</js>
<js>player.js</js>
<js>StartPlayer.js</js>
</jsOrder>
</SilverlightApp>
- マニフェストを manifest.xml というファイル名で同じディレクトリに保存します。
- これらのファイルを .zip として圧縮します(すべてのファイルはルートに置いてください)。
- silverlight.live.com に行って、Manage Applications タブを選び、.zip したアプリケーションをアップロードしてください。
- Silverlight Streaming の残りのステップを通じて、どうやって JavaScript と HTML コードを書けばよいのかわかります(※訳注。末尾参照)。ストリーミングコンテンツにアクセスするために、これらをページに追加してください。
これがどのように機能しているのかを実際に見てみるために、少し前に私が投稿した WPF Momentum のビデオをご覧ください。
※訳注。HTML ページの冒頭に追加する <script> タグ、実際に表示する場所に置く <div> タグ、CreateSilverlight.js として保存する関数定義の 3 つが表示されます。これは、Manage Applications ページで、後から確認することもできます。
さて、私も試しに投稿してみましたので、ご覧ください。
Commnity Ring Day(Template=Glassy、Video=VC-1 Streaming 512k DSL、446kbps、1'59")
Windows Vista 深夜発売(Template=Blitz、Video=700kbps、1'15")
今回はアリモノを使ったので、素材次第ではもう少し綺麗な表示になると思います。 「Windows Vista 深夜販売」については、もとの編集ツールでエンコードしなおしました(ビットレートも向上)。そもそも撮影が小型ビデオカメラだという点に制約はあるのですが、かなり綺麗になっています。
「Silverlight プログラミングを知らなくても」こんなものが作れてしまうわけです:-)