Chapter3 

●メタファイルを作成する

さぁ、ストリーミングファイルがやっと完成しました。それでは早速インターネットで公開しましょう・・・その前に、いま少し作業を行って頂きます。

◆作業フロー
テキストエディタ(メモ帳・秀丸など)でメタファイル情報を記述する

koukai-01.gif◆メタファイルを作成する理由
ストリーミングを視聴するには、プレイヤを起動させ直接URLを入力し再生するのではなく、たいていの場合はWEBページにストリーミングファイルとリンクさせ、リンクをクリックすることで再生される方法をとります。このリンクを直接ストリーミングファイルへのURL(例えばmms://192.168.11.34/movie.wmv)に指定すると一部のWEBブラウザでは再生が出来ない場合があります。これは基本的にWEBブラウザがHTTPプロトコルで通信をする為のソフトなので、ストリーミングで使用する違うプロトコル(mms or rtsp)などを解釈できないからです。その為、メタファイルを介してストリーミングファイルを再生させるのです。
※作成したメタファイルはWEBサーバーへアップします。

ではメタファイルを作成します。メモ帳などのテキストエディタを起動して下さい。
(スタート>すべてのプログラム>アクセサリ>メモ帳

なお、Windows MediaとRealMediaではメタファイルの記述内容と拡張子が違うので個別にご説明します。

【Windows Mediaのメタファイル作成】
Windows MediaのメタファイルにはWindows Media Player によってのみ解読可能な Extensible Markup Language (XML) スクリプトで記述します。メタファイル スクリプトは、必要に応じて複雑化することも簡素なものにすることも可能です。最も一般的なメタファイルは、単に サーバー上のマルチメディア コンテンツの Uniform Resource Locator (URL) 情報が記載されているものです。複雑なメタファイルは、複数のファイルや、ストリームの 再生リスト や、それらのファイルをどのように再生、またはストリーム配信するか、あるいは、テキストやグラフィック要素、Windows Media Player のインターフェイスに表示されるハイパーリンクなどの情報が記載されている場合があります。ここでは、一般的な記述を解説します。

テキストエディタである「メモ帳」に下記を記述します。

<asx version="3.0">
<entry>
<ref href="mms://サーバーの場所/movie.wmv"/>
</entry>
</asx>

<entry>~</entry>タグ内でパラメータを記述することが出来ます。
<ref href="mms://サーバーの場所/movie.wmv"/>の「"」と「"」の間にストリーミングファイルのURLを記述します。その際2番目の「"」の後に「/」スラッシュが付くことに注意して下さい。また、記述の際は全角英数字やスペースを使用しない事です。最後に拡張子を「.asx」とし任意の名前で保存します。

Windows Mediaフォーマットのメタファイルはこの他様々な設定を行うことが出来ます。詳細はMicrosoft社のWEBサイト「Windows Media メタファイルの活用」を参考にして下さい。
http://www.microsoft.com/japan/msdn/windowsmedia/production/asx.asp

つぎにタイトル/制作者/著作権の表示をご説明します。
テキストエディタソフトを利用して、下記のように記述します。

<asx version="3.0">
<entry>
<TITLE>商品番号001/扇風機</TITLE>
<AUTHOR>Real Stream</AUTHOR>
<COPYRIGHT>(C)2006 RealStream Inc.</COPYRIGHT>
<ref href="mms://サーバーの場所/movie.wmv"/>
</entry>
</asx></asx>

<TITLE>~</TITLE>に動画の題名(タイトル)を記述
<AUTHOR>~</AUTHOR>に制作者を記述
<COPYRIGHT>~</COPYRIGHT>に著作権表記を記述して下さい。
※なお、必ず<entry>~</entry>タグの間に記述します。
※ここで指定したメタ情報は。エンコード時に記述した「題名/制作者/著作権」より優先されます。

【Real Mediaのメタファイルの作成】
Real Meidaはいたってシンプルな記述方法です。メモ帳などのテキストエディタソフトを利用して、下記のように記述します。

rtsp://サーバーの場所/movie.rm

最後に拡張子を「.ram」とし任意の名前で保存します。
※Real Mediaのメタファイルにはクリップのタイトル・制作者・著作権が出来ないので、クリップ自体にエンコード時に挿入します。

Chapter3 

●ホームページへ配置する

次に、ストリーミングファイルへのリンクページを作成します。ストリーミングを再生するホームページの作成には2つのパターンが考えられます。

1.メディアプレイヤーを起動させて再生させる方法(ポップアップ形式)
koukai-02.gif

2.WEBページにメディアプレイヤーを埋め込む再生させる方法(エンベット形式)
koukai-03.gif

【ポップアップ形式で配置する】
この方法は複雑なHTMLタグを書かなくてもいいので、簡単に実現できます。動画配信サイトの多くが、ポップアップ形式を採用しています。
作成は、先程作成したファイルへリンクを貼るだけです。
<a href=”メタファイル”>動画を見る</a>
とおなじみのHTMLタグで設定します。他のHTMLファイルへリンクするのと同じ要領で行います。リンク先のファイルはストリーミングファイルではなく、ストリーミングファイルの場所を記述しているメタファイルになることに注目して下さい。

【エンベット形式で配置する】
ポップアップ形式ですと、どうしてもWEBページのデザインとか機能にマッチしないケースが多々あります。エンベッド形式なら、凝ったデザインのWEBページを作成し、そのデザインの中に動画再生画面を埋め込むことが出来ます。
ホームページ内にプレイヤーを埋め込むために、複雑なHTMLを書かなければなりませんが、デザインの凝ったホームページ内に再生画面を埋め込むことが可能です。例えば、テレビ画面風にデザインされたページのブラウン管部分にプレイヤーを埋め込むなんてことも可能です。
下記記述をそのままコピーするなりして、表示させたいHTMLの個所に貼り付けていってください。
また、高度な表示のさせかたなどは、マイクロソフトソフト社の「Windows Media コンテンツ開発」のサイトの「Web ページへの Windows Media の追加」に記載されていますので、そちらも合わせてご覧ください。

それではエンベッド形式のHTMLファイルの作成方法説明しましょう。

◆Windows Media Player
実際にHTMLタグは下記になります。
(図①のタイプでメディアプレイヤーを埋め込む場合)
埋めこみプレイヤー(エンベット形式)を実現させている記述は、表示させたいところのHTMLソースに下記情報を記述することで実現されます。まずは記述を見てみましょう!
koukai-04.gif

<html>
<head>
<title>sample エンベット形式</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">

<!-ここからWindows Media Player--------------->
<OBJECT ID="Player" width="320" height="305"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM name="autoStart" value="false">
<PARAM name="URL" value="http://realstream.jp/asx/tutorial2/honban.asx">

<embed src="http://realstream.jp/asx/tutorial2/honban.asx" autostart="false" width=320 height=305></embed>

</OBJECT>
<!-ここまで-------------------------------->

</body>
</html>

[記述したタグの説明]
<OBJECT>~</OBJECT>で囲まれた部分がプレイヤー表示部分になります。
1行目の 「width=」「height=」はそれぞれ、画面の「横」と「縦」のサイズです。ピクセルで指定してください。
「classid」はどのファイルも共通です。変えないで下さい。
<param name="AutoStart" value="true">は自動的に動画がスタートかどうかの設定です。 VALUE="false" の場合には、見る側がスタートボタンなどをクリックしないと動画が再生されません。ページを開くと動画が再生されるようにするには、 VALUE="true" と記述します。
<PARAM name="URL" value="http://realstream.jp/asx/tutorial2/honban.asx">は再生するメタファイルを指定。
<embed>~</embed>タグ内はNetscape指定であるマルチメディアリソースなどページ上に貼り付けるための汎用的なタグであります。タグ内では様々なパラメータ制御が出来るようになっています。<EMBED>タグ内ではすべて属性で指定します。
SRC属性: 再生するメタファイルを指定
WIDTH属性: 表示画面およびコントロール部分に幅
HEIGHT属性: 表示およびコントロール部分の高さ
AUTOSTART属性: 自動再生をさせるか、再生ボタンでスタートかを指定。自動再生「true」再生ボタンでスタート「false」

▼上記記述を使用したエンベット形式でのWindows Media Player

▼上記エンベット形式記述

◆Real Player
実際にHTMLタグは下記になります。
(図②のタイプでメディアプレイヤーを埋め込む場合)
埋めこみプレイヤー(エンベット形式)を実現させている記述は、表示させたいところのHTMLソースに下記情報を記述することで実現されます。まずは記述を見てみましょう!
koukai-05.gif


<HTML>
<HEAD><TITLE>sample エンベット形式</TITLE></HEAD><BODY>

<!--ここからプレイヤー画面---------------------->
<object id=video1
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height=240 width=320>
<param name="controls" value="ImageWindow">
<param name="console" value="Clip">
<embed type="audio/x-pn-realaudio-plugin" console="Clip" controls="ImageWindows" height=240 width=320>
</embed>
</object>

-<!--ここからコントロールパネル一式--------'
<object id=video1
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height=40 width=320>
<param name="controls" value="All">
<param name="console" value="Clip">
<param name="autostart" value="false">
<param name="src" value="http://realstream.jp/ram/rs_300.ram">
<embed src="http://realstream.jp/ram/rs_300.ram" type="audio/x-pn-realaudio-plugin" console="Clip" controls="All" height=40 width=320 autostart=false>
</embed>
</object>
<!--ここまで------------------------->

</BODY>
</HTML>


上記ソースで[ここからプレイヤー画面]が図②のプレイヤー画面、 [ここからコントロールパネル一式]が図②の再生や一時停止などのコントロールパネルになります。
各ソースとも<OBJECT>~<OBJECT>の記述はIEで解釈される部分。<EMBET>~<EMBET>はNetscapeで解釈され部分です。より沢山の人に診てもらえる様両方のソース記述をおこなっています。

■IE指定である<OBJECT>はマルチメディアリソースなどページ上に貼り付けるための汎用的なタグでありタグ内では様々なパラメータ制御が出来るようになっています。
classidではリアルプレイヤー独自のID番号を記述。HEIGHT属性、WIDTH属性では画面サイズを指定しています。さらに各種設定を<PARAM>タグで指定します。
<param name="controls" value="ImageWindow"> ではプレイヤー画面指定。
※その他に「ControlPanel」「PlayButton」「StopButton」「InfoVolumePanel」など個別にコントロールパネルをカスタマイズできます。)
<param name="src" value="http://realstream.jp/ram/rs_300.ram">では、再生するメタファイルを指定。(WEBサーバーからストリーミングさせるには拡張子が".rpm"になります。)
<param name="controls" value="All">ではコントロールパネルをすべて表示させる指定。
<param name="autostart" value="false">では、WEBページの読み込みと同時に再生をスタートさせるかどうかを指定します。(今回は"false"を指定しているので再生ボタンを押してスタートとなる。自動再生させるには"ture"を指定する)

■Netscape指定である<EMBED>もマルチメディアリソースなどページ上に貼り付けるための汎用的なタグでありタグ内では様々なパラメータ制御が出来るようになっています。<EMBED>タグ内ではすべて属性で指定します。
SRC属性: 再生するメタファイルを指定
WIDTH属性: 表示画面およびコントロール部分に幅
HEIGHT属性: 表示およびコントロール部分の高さ
AUTOSTART属性: 自動再生をさせるか、再生ボタンでスタートかを指定。自動再生「true」再生ボタンでスタート「false」
CONTROLS属性: コントロールパネルの表示。 プレイヤー画面を表示するには「ImageWindow」、全てを表示させるには「ALL」。
※「ControlPanel」「PlayButton」「StopButton」「InfoVolumePanel」など個別にコントロールパネルをカスタマイズできます。

▼上記記述を使用したエンベット形式でのReal Player

▼上記エンベット形式記述

Chapter3 

●より多くの視聴者向けに・・

ナローバンド用にビットレートを低く設定してエンコードしたストリーミングファイルのクオリティはかなり低くなります。また画面サイズも小さくなります。よってブロードバンドユーザーは物足りなく感じてしまうでしょう!かと言ってビットレートを高く設定し、クオリティを上げるとナローバンドユーザーが視聴できなくなります。
そこで、ナローバンドユーザー用とブロードバンドユーザー用に違ったビットレートのストリーミングファイルを用意してあげましょう!メタファイルは二つ用意しなければなりませんが・・・

また、同じ動画ファイルをRealフォーマットとWindowsフォーマットでそれぞれエンコードして配信してあげるのも親切です。
yori-01.gif

【マルチビットレートを使用する】
マルチビットレートとは、1つのストリーミングファイルへのビットレートを複数設定できる配信方法です。配信時にストリーミングサーバー側が視聴者の帯域環境を割り出し、ベストな帯域での配信を可能にします。視聴者側の帯域環境が低い場合は、エンコード時に設定した低いビットレートで配信。高い場合は高いビットレートで配信します。
これをWindows Media では「インテリジェントストリーム」Real Mediaでは「シュアストリーム」といいます。
しかし、ビットレート別でのビデオサイズまで指定できないので、配信時のビデオサイズは統一されてしまいます。

(例)
45Kbps/128Kbps/300Kbpsのビデオサイズ320*240でマルチビットエンコードした場合

45Kbps再生時のビデオサイズ 320*240(適正ビデオサイズは160*120)
128Kbps再生時のビデオサイズ 320*240(適正ビデオサイズは160*120~320*240)
300Kbps再生時のビデオサイズ 320*240(適正ビデオサイズは320*240)
この結果、45Kbpsでの再生時にはクオリティが低い状態で再生されてしまいます。

Chapter3 

●ストリーミングを公開する

ここまでで、ストリーミング配信をする為の全ての準備が出来ました。

・ストリーミングファイル(エンコードした動画ファイル/拡張子.wmv .rm)
・メタファイル(ストリーミングファイルのURLが記述されているテキストファイル/拡張子.asx .ram)
・HTML(メタファイルへのリンクを記述してあるHTML/拡張子.html .htm)

【サーバーへアップする】
ストリーミングファイル・メタファイル・メタファイルへのリンク設定済みのHTMLファイルの3つが用意できたら、FTPソフトを使ってアップロードします。

動画ファイルは「バイナリ(Binary)モード」でストリーミングサーバーへ、メタファイルとHTMLファイルは「ASCII(テキスト)モード」でHTTPサーバーへアップロードしてください。
※ストリーミングファイルは先ほど「メタファイル」に記述したアドレスにアップロードしないときちんと動作しません。

FTPソフトの使い方(FFTP版)

【注意!】
ストリーミングサーバではなく、「HTTPサーバー」で動画を公開する場合には、動画ファイル、メタファイル、HTMLファイルはHTTPサーバーへアップします。HTTPサーバーでの動画配信はストリーミングはされますが、配信方法がHTTPプロトコルなので、同時アクセスなどには対応しておりません。視聴者が同時に2~3人になると再生に不具合(ブロックノイズや受信が出来ないなど)が起こります。
商用レベルでのストリーミング配信ではストリーミングサーバーからの配信は必須です。

当社のオンデマンド配信コース

Chapter3 

●Helix Universal ServerからのQuickTime配信

任意のコーデックを使用したエンコード及びストリーミングのヒンティング(ヒントトラック)処理が行われているQuickTimeクリップ(.mov)はHelix Universal ServerよりAppleのQuickTimeプレイヤーにストリーミングされます。
なお、QuickTime3など、旧バージョンのQuickTimeはサポートされていません。

●QuickTimeのコーデックサポート
QuickTimeプレイヤーでは、独自に開発された以下のコーデックでエンコードされているQuickTimeヒントクリップを再生することができますが、RealPlayerでは出来ません。
・Sorenson
・Cinepak
・QualcommPureVoice
・Qdesign
上記の規格基準コーデックを使用してエンコードされたQuickTimeヒントクリップであれば、QuickTimeプレイヤーおよびRealPlayerのいずれかでも再生可能です。

●QuickTimeプレイヤーへURLを指定して再生させる
QuickTimeプレイヤーから直接要求をする場合のURLは下記になります。

rtsp://Helix Universal Server/*.mov

●QuickTimeプレイヤーをWEBページへ埋め込む
QuickTimeクリップをQuickTimeプレイヤーにストリーミングする場合は、QuickTimeの標準埋めこみプロシージャを使用して、WEBページにクリップを埋めこむことが出来ます。

上記埋めこみプレイヤー(エンベット形式)を実現させている記述は、表示させたいところのHTMLソースに下記情報を記述することで実現されます。まずは記述を見てみましょう!

<HTML>
<HEAD><TITLE>エンベット形式</TITLE></HEAD>

<BODY>

---①ここからプレイヤー----------------------
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320" HEIGHT="256" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="QuickTime4_Required.mov">
<PARAM NAME="qtsrc" VALUE="rtsp://real server/rstream/demo.mov">
<PARAM NAME="autoplay" VALUE="false">
<PARAM NAME="controller" VALUE="true">
<PARAM NAME="loop" VALUE="false">
<EMBED SRC="QuickTime4_Required.mov" QTSRC="rtsp://real server/rstream/demo.mov" WIDTH=320 HEIGHT=256 AUTOPLAY=false CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/">
</EMBED>
</OBJECT>
---ここまで---------------------------

</BODY></HTML>

各ソースとも<OBJECT>~<OBJECT>の記述はIEで解釈される部分。はNetscapeで解釈される部分です。より沢山の人に診てもらえる様両方のソース記述をおこなっています。

RealServerからの配信QuickTimeクリップを再生させるには少し複雑な解釈が必要です。
パラメーター src で、.mov拡張子に基づいてQuickTimeプレイヤーが起動されます。ここでは、.movの拡張子をプレイヤー起動に渡すため、「QuickTime4_Required.mov」なるQuickTimeクリップをQuickTimeプレイヤーを埋め込むWEBページと同じ階層にアップしておき、それを読み込んでいます。

QuickTime4_Required.movのダウンロードはこちらからどうぞ

Windowsユーザーは右クリックで「対照をファイルに保存」

Macユーザーは「Ctrl」を押しながらクリック!




パラメータ qtsrc は、再生するクリップをQuickTimeプレイヤーに伝えます。ブラウザはRTSPを解釈できない為、パラメーター
src にRTSP URLを使用できません。しかし、ブラウザはこのURLを解釈しようとはせずに、単に qtsrc パラメーターの値をQuickTimeプレイヤーに渡し再生が行われます。

 

▼サンプルをコピーする場合は下記ソースをご使用ください。