Microsoft Expression Encoder 4でSilverlight用動画の作成

Microsoft Expression Encoder 4でSilverlight用動画の作成
 
Silverlight用の字幕付きWindows Media配信アプリケーションの作成
(2010.12.11作成 11.01.31更新)
Microsoft Expression Encoder 4無償版は、主に“Silverlight”を利用してWeb上から再生可
 能な動画を作成出来るソフト(こちらの「動画の変換やライブ配信が可能なMS製フリーソフト
  「Expression Encoder 4」を参照)。
 無料のExpression Encoder 4 は、H.264/Doblyコーデック、IIS スムーズ ストリーミング、
  ライブ スムーズ ストリーミング及びデジタル著作権管理 (DRM)に非対応で、スクリーンキ
  ャプチャに10分の制限はあるが、個人で使用するには充分な機能を搭載している。
 Microsoft Silverlight テンプレートは、Silverlight とMicrosoft Expression Encoderの統合
  の中核になっており、このテンプレートによって、エンコードされたビデオでSilverlight テク
  ノロジによる豊富なビジュアルおよび対話型機能を活用することが可能となる。
SilverlightはMac OSでも動作するクロスプラットフォームなテクノロジで、Media Playerを使
 わずにWebページに埋め込まれたDRMにも対応したWindows Mediaムービーの再生が可能
 となっている(こちらの「動画配信サービスにSilverlightを使う」を参照)。
そこで今回は、A)字幕とチャプター付き、及び B)プレイリスト付きのSilverlight用動画の作成
 手順を記載し、その作品の配信試験を行って字幕表示機能及びプレイリスト表示機能を中
 心に、各種Silverlight テンプレートの差異を検証してみた。

 
 Microsoft Expression Encoder 4 の入手とインストール
入手先: こちらから (今回は、Encoder_ja.exe v.4.0.1651.0を使用)。
*Microsoft Expression Encoder 4 Proダウンロード版\25,193(税込)
 動作には.NET Framework 4(ここから入手)及び Silverlight 4の他、 DirectX 9に対応
 するWDDM準拠のグラフィックドライバーが必要。
 
 
 対応フォーマット形式(本家の記載)
入力可能な形式
 ビデオ ファイル:
   *.avi;*.mpg;*.mpeg;*.wmv;*.asf;*.dvr-ms;*.m2v;*.ts;*.vob;*.mod;*.xesc;*.mov;
   *.m4v;*.3gp;*.3g2;*.dv;*.mp2;*.qt;*.wtv;*.mp4;*.avs
   Windows Media Playerで再生可能な状況なら、MKV, OGG, M2TS, FLV, DIVX
   やWebM動画でも読み込み可能だった(NSVとRMは不可)。
 オーディオ ファイル:
   *.wma;*.mp3;*.wav;*.aif;*.aiff;*.bwf;*.m4a;*.m4b
読み込み可能な字幕ファイル
   xml, sami, smi, dfxp
出力
ビデオ形式
  WMVのみ。残念ながら、Silverlight 3からサポートされたH.264/AAC圧縮MP4への
   出力にはプロ版が必要。
 
 
 Microsoft Expression Encoder 4操作手順
使用方法は「Expression ビデオ チュートリアル」の動画「Expression Encoder 3 の基本
  的な使い方[06:19]」等が分かり易い。
Microsoft Expression Encoder 4をクリックすると、新しいプロジェクトの読み込み選択画
 面が表示される。今回は、「Silverlightプロジェクト」ではなく「トランスコードプロジェクト」
 で起動(「ライブブロードキャストプロジェクト」も可能なようだが、IIS スムーズ ストリーミ
 ング配信はプロ版でないと使用出来ない)。
 
プロジェクト「トランスコード」と「Silverlight」とでウインドウの表示が多少異なっている。
 
 *Silverlighプロジェクトで起動すると、「エンコード」のカスタマイズ、「拡張」のビジュ
   アルオーバーレイの挿入及び「メタデータ」のチャプターと字幕を挿入するタブ画面
   が直ちに表示されない為、不便だ。
 初めに、「ウインドウ」メニューの「テンプレート」をチェックして使用可能にしておく。
 
A)単数素材の場合の編集・変換操作の手順
 1) 「メディア コンテンツパネルとソース パネル」画面下部の 「インポート」ボタンを
    クリック。
 2) 「ファイルを開く」ダイアログが表示されるのでエンコードを行う動画素材を選択。
   今回は、Full HDのMKVファイル(BDリッピング後の無劣化映像1920x1072の
    H.264_AC3.mkv)を素材とした。
   なお、ファイル名が日本語の場合は、出力後ローカルで再生させると変換した
     ファイルの場所が不明となって再生出来ない

     Web配信では再生可能だが、何かと不便なのでファイル名に日本語は使用
     しない方が無難だ。
 3)「タイムラインとトランスポート コントロール」画面でビデオのクロップ、トリミングと
    カット編集も可能となっているが、トランジションツールやテロップ文字修飾ツー
    ルは搭載されていない。
   今回は「タイムラインの最初にメディアアイテムを挿入します」ボタンから、本ソフト
    C:\Program Files (x86)\Microsoft Expression\Encoder 4\StockContent
    に付属のSilverlightのロゴムービー: sl.wmvを読み込んでオープニングムービ
    ーとした。
 
 4)「アプリケーション」画面右側の 「拡張]」タブを選択して、「ビジュアルオーバーレイ」
   の「オーバーレイを追加する」から、イメージ ファイル(*.jpg;*.jpeg;*.bmp;*.png;*.gif;
   *.tif) 又はビデオ ファイル(*.avi;*.mpeg;*.wmv; *.ts;*.vob;*.mov;*.mp4等)の読み込
   みが可能。
   今回は、自作したExpression Encoder 4のロゴ入りPNGファイルを挿入して(アルフ
    ァチャンネルを有していれば不透明度の変更が可能)、オープニングムービーのテ
   ロップとした。
   なお、映像のデインターレース方法を詳細に指定する事が可能となっているが、今
    回は初期設定のままとした。
 
 5) 「メタデータ」タブの「マーカー」で、チャプターを設定したい位置にビデオのタイムライ
   ンを合わせて、 [追加] ボタンをクリック。すると、リスト内にマー カーが作成されるの
   で、「値]」フィールドに内容を入力。
   サムネイル画像が必要な場合は、「サムネイル」フィールドにチェックをつける。
  今回は、4箇所(本編開始、1/3時点、中間点、2/3時点)挿入した。
 6) 字幕(キャプション)の挿入
   スクリプトコマンドで編集した場合は、ヘッダー又はストリームに格納した字幕に、
   テキストパネルで流用した場合は、本体とは別の DFXP(Distribution Format
   Exchange Profile)キャプションファイルとなる。
  A)「メタデータ」タブの「スクリプトコマンド」で、字幕の挿入場所と時間をタイムライン
    を見ながら編集する(上図)。但し、残念ながらプレビュー画面でリアルタイムに
    表示する機能を搭載していない

   「オプション」をクリックして、既に作成しておいた字幕ファイル(*.xml;*.sami;*.smi;
    *.dfxp)を「インポート」から読み込む事も可能。
    「Windows Mediaストリーミング動画のSAMI字幕表示」で使用した SAMI字幕ファ
    イルを流用したところ、時間経過はそのまま使えるが字幕表示に不具合があり、
    少々再編集が必要だった。
   又、 「インポート」からXMLファイルかDFXPファイルに出力してサイドカー ファイル
    としてB)のテキストパネル使用する事も可能。
  B)テキストパネルで既に作成した字幕ファイルを流用
   画面下部の「テキストパネル」で、ソースファイル右の「このソースのクローズド
    キャプション ファイルを追加します」をクリックして字幕ファイル(*.dfxp;*.sami;
    *.smi;*.srt;*.sub;*.lrc;*.xml)を読み込む。
   今回は、文字修飾(文字色は赤色、イタリック)したSAMI 字幕ファイルを用いた。
    本編ビデオ(chicken.mkv)前に 5:499秒のSilverlightのロゴムービー(sl.wmv)
    を挿入したので、そのオフセット時間を指定した。
 
  <結果>最終出力すれば、DFXPファイルとして生成される。
   DFXP、SAMI、SRT、SUB、または LRC ファイルとして保存されているキャプション
    は、形式やスタイルを変えずにDFXP ファイルに変換されるとあるのだが・・・
    文字修飾したSAMI 字幕ファイルで検討したところ、残念ながら文字色は赤色→
     白色となってしまいイタリックを引き継いでくれなかった。
    *SRT字幕ファイルも流用可能だが、SRT用スタイル・ファイルまで読み込む事
      は出来ない。
   そこで、このファイルの<styling>タグをEmEditorで編集して文字修飾を行った。
    fontFamily="proportionalSansSerif"→"MS Gothic,Osaka,proportionalSansSerif"
    p6:fontStyle="italic"を追加(SansSerifのみだと日本語がイタリック化しない)。
    fontSize=→"1.5c"→"1.8c" color="white"→"red"へ変更
 
 DFXPファイルの内容 ページ表示
 
 
   なお、初回再生時は字幕の自動表示が出来ない場合があるので、「クローズドキ
    ャプションの表示/非表示」で表示させる必要があった。
   何んと!レンタルサーバの場合は、検討した.MacのiDiskサイト、CATVの KATCH
    
MICS、一般の So-netと MOMO太郎の全てで、何故かキャプションを表示出
    
なかった Y (>_<、)Y
    ・・・以下のAddType application/...を記載した .htaccessファイルを、同じフォルダ
      に入れてアップロードしようがしまいが変わりなかった。
      AddType application/xaml+xml .xaml
      AddType application/x-silverlight-app .xap
      AddType application/xaml+xml .dfxp
 
 7) 出力形式、映像と音声の圧縮方法を設定
  「システム」タブにSilverlight用エンコードのプリセットが各種用意されているが、
   今回はカスタマイズ。
 
  「エンコード」タブで以下の如く、出力形式:Windowsメディア(MP4は無償版では不
    可)、解像度:640x360、ビットレート映像:654Kbps、音声:96Kbpsに設定した。
   今回の素材では、ビデオの縦横比を16:9に、「正方形ピクセルを強制する」を解除
   に設定しないと、640x358となってしまう場合があった?
 
 8) 「テンプレート」タブのドロップダウンリストから任意のSilverlightテンプレートを選択。
   スキンの仕様をプレビュー領域のモーションで確認する事が可能。
   再生開始時にポスターフレームを表示するか、直ちにビデオを再生するか選択。
   *「ShowPosterFrame」 はテンプレートだけがダウンロードされ、ビデオはダウン
    ロードされない設定。
   「詳細プロパティの表示/非表示」をクリックすると、各種オプションが表示さる(今
   回は初期設定のまま)。
   「スケール モード」で、エンコードされたビデオのサイズをブラウザーがどのように
    引き伸ばすかを指定する。

    NoStretch: ビデオを引き伸ばさない(初期設定)

     StretchToFill: ビデオの高さを表示領域に合わせて変更し、縦横比が維持され
      るように幅を引き伸ばす。

     StretchDistorted: ビデオの幅と高さの両方を表示領域に合わせて引き伸ばし、
      ソースの縦横比を維持しない。
 9) 「出力」タブの 「ジョブ出力」で、出力場所を指定し、ファイル名.拡張子を入力。
  なお、デフォルトでは %My Documents%\Expression\Expression Encoder\
    Outputフォルダに出力される。
 10) 画面下の [エンコード] ボタンをクリックしてエンコードを開始。
   なお、エンコード中に「一時停止」すると「再開」が出来ない不具合がある。
   変換が完了すると、
   Microsoft Expression
   Development Server
   (Microsoft.Expression
   .WebServer.exe)がタ
   スクトレイに起動して、
   生成された動画配信
   アプリケーションがブ
   ラウザに表示される
   (エラーとなっても右
    で再チャレンジすれ
    ば再生される)。
   但し、DFXP字幕は表
    示出来ない
 <成績>
   動画配信アプリケーションの内容
    テキストパネルで字幕ファイルを流用した場合は、DFXPキャプションファイルも
    生成されるので、上記の如く文字修飾の為に編集した 。
 
   変換されたWMVファイル情報:期待値で出力された。
 
追記(2010.12.20)
B)複数素材の場合のプレイリスト付きSilverlight動画の作成
  1)インポートボタンから複数(今回は9個)の素材を一括して読み込む(下図)。
   今回の素材は、SANYOのXacti DMX-HD1000で撮影したMPEG-4 AVC/H.264ファイ
     ルを、MPEG Streamclip 1.2で再エンコードする事なくトリミングした後、Corel Ulead
     VideoStudio 12 Plusで結合/編集した(こちらを参照)。
     Blu-rayビデオを作成するとともに、その作成過程で出力された BDMV\STREAMフォ
    ルダ内のMPEG2-TSファイル(MPEG2_AC3,1920x1080、29.970fps、35Mbps) 9個
    (計 32分45秒)を元素材とした。
   メディアコンテンツのソース上で 右クリック「「アイテムを上・下へ移動」して順序を調整
 2)以下の設定は、A)単数素材の場合との変更点のみを記す。
   (1)エンコード:全て同じ設定でエンコードするには、メディアコンテンツのソースをShiftで
     全選択して設定すればよい(但し、ビデオの縦横比「ソース」→「16:9」は不可)。
     出力形式Windows Media、解像度:720x404、目標値のビットレート映像:654Kbps、
     音声:96Kbpsに設定。
  (2)プレイリストのサムネイル:「出力」タブのサムネイルで指定(上図の黄色文字)。
     プレビューを見ながら気に入った時点で「ユーザー設定」をチェック。
    「ジョブ出力」の「メディアファイル名」は、{元のファイル名}.asfとした方が便利。
  (3)「メタデータ」タブで、タイトル欄と説明欄に内容を記入すると(上図)、出力後プレイリ
     ストに表示されるテンプレートもある(「結果と考察」の○印テンプレート)。
  (4)テンプレートのオプション:「プレーヤーの開始時にプレイリストを表示」にチェック(上図)。
     読み込み時:「ShowPosterFrame」の場合は最初のタイトルのサムネイルが表示さ
    れスタート待ちとなる  → 今回はオープニングビデオを用意しているので、「Show
     VideoPlaying」 に変更。  
 3)エンコードを開始すると上から順に変換が進行する
 
  <成績>
    1) 9個の素材(計 32分45秒)の変換完了迄に掛かった時間: 1時間22分
    2)結果と考察の如く、プレイリスト表示とタイトル間移動に不都合なテンプレート
     が多かった。
    3)プレイリストのタイトル名を日本語で表示するには、「メタデータ」タブのタイトル
     欄に日本語名を記入すれば反映される(素材のファイル名を日本語にすると
     ローカル再生出来なくなるし、その必要もない)。
    4)「メタデータ」タブの説明欄に内容を記入しても、出力後プレイリストにその内
      容を表示出来ないテンプレートもある→「結果と考察」の×印)。

 
 結果と考察
  Microsoft Expression Encoder 4は、相応の動画編集機能を搭載した Silverlight用
  動画配信アプリケーションの無料作成ツールとなっている。
A)単数素材を使用した場合の字幕表示機能
  単数素材に、クローズドチャプションの字幕とチャプターを4ケ所マーカーし、再生ヘッド
  にメディアアイテムを挿入して、最終目標値の解像度:640x360、ビットレート映像:
  654Kbps、音声:96Kbpsで変換した。
  単数素材:字幕・チャプター付き配信試験
 
SilverlightによるWindows Mediaムービーの字幕表示
Expression Encoder 4
でSilverlight用動画
キャプション表示
Xserverは ここから入場

自宅ミラーサイトは こちら
*ムービーを視聴するには、Silverlight 4 以降が必要です。
 Silverlightテンプレートを 4種類提示して比較したが、一長一短ありベストが無い。
 A)「メタデータ」タブの「スクリプトコマンド」で編集してビデオに格納した字幕は、文字
   修飾出来ず、テンプレートにお任せとなる。
   字幕表示のコントロールが可能なテンプレートの多くは、文字色が灰色の為に見
   難い字幕となってしまう。一方、
   白色文字で表示可能なテンプレートはクリーンとスムースストリーミンググラフィン
    グプレーヤーの 2種類のみと少ない。
 B)DFXPサイドカー ファイルとしてエクスポートした場合や「テキスト」パネルで外部の
   字幕を流用した場合は、DFXPファイルを編集して文字修飾(サイズ、文字色の変
   更とイタリック)が可能となる。しかし、
   初回再生時は字幕を自動的に表示出来ない場合があるので、「クローズドキャプ
   ションの表示/非表示」で表示させる必要があった。
     サーバの違いによるDFXP字幕表示の可否試験
 
DFXPキャプション表示
の可否
  各種レンタルサーバ 
 Xserverは     ここから
   MICSは     ここから
  MOMOは    ここから
 自宅ミラーサイトは  こちら
      残念ながら、ローカルサーバでも レンタルサーバでもDFXP字幕を表示出来ない
      ・・・自宅サーバでのみ表示可能だが、何か方策はないものだろうか  ?(゜_。)?
      ・・・ Addtype application/ttaf+xml .dfxp
        Addtype application/x-silverlight-app .xapでも対応出来ない (;>ω<)/
 
 なお、「ブラックグラス」のように上下に黒帯が出来てしまうテンプレートも多く(「ホッ
     プアップ」,「Archetype」)、配置上見栄えが悪い。
   「エクスプレッション」は、一度再生されると次回再生からは途中再生となってしま
    
不具合がある。
   「クロム」は上下に字幕が二重に表示されてしまう不具合がある。
追記(2010.12.20)
B)複数素材を使用した場合のプレイリスト表示機能
  9個の素材(計 32分45秒)にサムネイルを付けて、解像度:720x404、目標ビットレ
  ート映像:654Kbps、音声:96KbpsのWMVに変換して、プレイリスト付きで作成した。
  複数素材:プレイリスト表示の配信試験 (「ブラックグラス」で作成したデモを提示)
 
SilverlightによるWindows Mediaムービーのプレイリスト表示
ツアー”天空の楽園”
アンコール王朝
Xserverは ここから入場

自宅サーバは こちら
  ○印は「メタデータ」タブの説明欄の内容を表示する事が可能なテンプレートを示す。
 
  ×印は説明欄の内容を表示する事は出来ないが、タイトルの日本語表示は可能。 
  1)以下のテンプレートは、左端に常時プレイリストを表示させる仕様
    ○「フロステッドギャラリー」, ○「Silverlightギャラリー」と ×「リフレクション」
    全画面にしてもプレイリストは表示されたままなので、プレイ画面が狭い。
  2)以下のテンプレートは、プレイリストの表示/非表示が可能な仕様
   (1)問題なくタイトル間の移動が可能
     ○「ブラックグラス」,○「クリーン」, ○「コーポレートシルバー」と ○「QuickSilver」
     は、再生画面上にプレイリストが表示される仕様となっている。
     プレイリストの位置は、コーポレートシルバーの左端以外は中央に表示される。
   (2)タイトル間移動にバグがあるテンプレートこちらの操作デモムービーを参照。
     新しいタイトルを選択しても、前に再生していた残り部分から再開されてしまう
     という不具合がある(初回のみタイトルからの再生は可能だが以降はダメだ)!
     ×「エクスプレッション」:洒落たWindows Aeroの3D様プレイリスト表示となってい
       るが、自由にタイトル間を移動出来ない・・・残念。
     ○「Archetype」:縦配列プレイリスが右端からスライドしてト表示されるが、残念。
     ×「クロム」:中央で整列するプレイリストが表示されるが、残念。
不具合のデモムービーへ
 残念ながら上記3種類のテンプレートはいずれも、プレイリスト上のタイトルで
 クリックしてもそのタイトルの再生トリガーとはならず、再開となってしまう
Y (>_<、)Y
  3)プレイリストの切り替えボタンが無いテンプレートのため未検証
     「スムースストリーミンググラフィングプレーヤー」,「ホップアップ」と「Silverlight
     デフォルト」
 
    補足
 無料のシルバーライト用プレーヤーによる動画の配信
  HTMLタグを埋め込むだけで使える無料のSilverlight用プレーヤー(ここから入手。
  今回はバージョン2.10)を用いて、既存のWindows Mediaムービー及びH.264/AAC
  圧縮MP4ムービーの配信試験を行った。
 使用方法
 
 使用方法 ページ表示
 1)free_silverlightplayer-V210.zipを解凍して、サーバサイトの適当なフォルダに
  free_silverlightplayer.xapとsilverlightplayer-install-640-360.gifを配置。
 2)自前の配信動画とポスター画像を用意
   配信に用いた動画素材の解像度は640x360
    silverlight-test.wmv:MS製Expression Encoder 4無償版を用いて作成したビデオ
     ヘッダーに収納した字幕付きWindows Mediaムービー
    silverlight-test.mp4:MediaCoder 0.7.3 CUDAで作成したH.264/AAC圧縮MP4に、
     Yamb 2.0.0.8で IDX+SUB字幕を収納したMP4ムービー
   silverlightplayer.jpg:ポスター画像
 
 3)HTMLファイルに、使用方法に記載の<object>タグをコピーしてカスタマイズ。
 
 <object>タグの変更内容 ページ表示
 配信試験
 
SilverlightPlayerを
用いて動画の配信
(Xserver)
  Windows Media(wmv指定)
 *Windows Media_asx01
こちら
 *Windows Media_asx02
こちら
  H.264/AAC圧縮MP4 
   *ムービーを視聴するには、Silverlight 3 以降が必要です。
   *Windows Media_asx01:<param name="initparams" value=に「Windows Media
     ストリーミング動画 のSAMI字幕表示」で使用したメタファイル(ASXファイル)を
     指定した(こちらを参照)。ASXファイルには、ASFファイルとSAMI字幕とが同時
     に配信されるするように記載されているのだが・・・如何?
   *Windows Media_asx02:<param name="initparams" value=に「”天空の楽園”
     アンコール王朝の浪漫5日間」の連続ストリーミングで使用したメタファイル
     (ASXファイル)を指定した(こちらを参照)。ASXファイルには、9個のASFファ
     イル(9タイトル計 32分45秒)が登録されているが・・・如何?
  <結果と考察>
    無料のシルバーライト用プレーヤーは、HTMLに <object>タグを記述するだけで
     簡単に既存の動画を Silverlightに対応して配信する事が可能となる。
    WMV(ASF, ASX)以外にもMP4ファイルの Silverlight配信が可能だ。
    但し、再生/停止、音量調整以外のコントロール機能を搭載していない。
     いずれの字幕も表示出来ない・・・何か方策でもあるのだろうか?
 
     wvxやasxメタファイルに対応し再生リストの使用は可能だが、メタファイルのロ
      ールオーバー命令は使用出来ない。とある
     ・・・順番に連続再生する事は可能だが、再生リストをプレイリスト表示出来
       る訳ではないし、タイトル間をジャンプ再生出来る訳でもない(ダウンロー
       ド完了後迄しかジャンプ出来ない)。
  追記(2011.01.31)
 JW Silverlight Playerによる動画の配信
 Longtail社が無料で配布しているJW Player for Silverlight(ここから入手)は、HTML
  にタグを埋め込むだけで使えるSilverlight用プレーヤー。
 ダウンロードしたwmvplayer.zipを解凍すると、以下のSilverlight動画配信用ファイルが
  一式同梱されている。
 
 使用方法
  1)サーバサイトの適当なフォルダにSilverlight動画配信用ファイル一式を配置。
  2)自前の配信動画(Windows MedianaないしMP4ビデオ)とポスター画像を用意。
  3)readme.htmlに記載されている<script type..>タグの記述をカスタマイズするか、
    本家 SETUP WIZARDの「wmvplayer with ...」を使用すれば、カスタマイズしたプレ
    イヤーをHTMLに 埋め込む為のコードを生成してくれるので、コピーしてHTMLに貼
    り付けて使用する。
 
 <script type.. >タグのカスタマイズ ページ表示
    height=動画素材の縦サイズ+プレイヤーのサイズ(20px)に指定。
 結果と考察
   無料のシルバーライト用プレーヤーと同様に、
   HTMLに <script type..>タグを記述するだけで簡単に既存の動画を Silverlightに対
    応して配信する事が可能となる。
   WMV以外にもMP4ファイルの Silverlight配信が可能だ。
   残念ながら、再生/停止、音量調整以外に、JW FLV Media Playerのようなプレ
    イリストや字幕のコントロール機能は搭載出来ない。
 

| Kenのムービー計画へ >動画狂コーナーへ |