動画ファイル埋め込み(ストリーミング配信) †
ストリーミング配信を行う場合に、動画ファイルをWEBページに埋め込む方法を記述する。
以下では、RealPlayer用の動画ファイル(拡張子rm)を、WEBページに埋め込んだRealPlayerで再生する為の方法を記載する。
また、ストリーミング配信を前提とする為、プログレッシブダウンロードする場合の説明については記述していない。
※配信にはストリーミングサーバが必要である。⇒ ｽﾄﾘｰﾐﾝｸﾞｻｰﾊﾞ構築
【構成 および ファイル配置】
| 配置するサーバ | ファイル | ファイル説明 |
| WEBサーバ | HTML | WEBページ上から再生できるようにRealPlayerを埋め込んだもの |
| メタファイル | ストリーミングサーバ上の動画ファイルへのPATHを記したもの |
| ストリーミングサーバ | 動画ファイル | 実際に再生する動画ファイル |
※各ファイルの参照関係
[HTML] -> [メタファイル] -> [動画ファイル]
【ファイルの記述、配置】
１．動画ファイルの設置
・動画ファイルをストリーミングサーバに設置する。
| ファイル名 | 設置場所 | 説明 |
| sample.rm | ストリーミングサーバの動画設置用ディレクトリ
(例)/usr/local/movies/sample.rm | rtsp://my_stream_server/sample.rm でアクセス可能な事 |
２．メタファイルの記述、および設置
・下記のようにメタファイル(sample)を作成、設置する
| ファイル名 | 設置場所 | ファイル内容 |
| sample.ram | WEBサーバの公開ディレクトリ以下
(例) http://my_web_server/sample.ram | rtsp://my_stream_server/sample.rm |
【動画ファイルの種類による設定の違い】
| 動画ファイルの拡張子 | メタファイル拡張子 | メタファイル記述例 |
| rm | ram | rtsp://サーバー名/パス/音声・動画ファイル名.rm |
| wmv | wvx | <asx version="3.0">
<entry>
<ref href="mms://サーバー名/パス/音声・動画ファイル名.wmv" />
</entry>
</asx> |
| asf | asx | <asx version="3.0">
<entry>
<ref href="mms://サーバー名/パス/音声・動画ファイル名.asf" />
</entry>
</asx> |
３．HTMLファイルの記述、および設置
| ファイル名 | 設置場所 | ファイル内容 |
| sample_rm.html | WEBサーバの公開ディレクトリ以下
(例) http://my_web_server/sample_rm.html | <html>
<body>
<h3>WEBページにRealPlayerを埋め込んでのストリーミング配信サンプル</h3>
<!-- 動画表示領域 -->
<object id="Clip1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="350" height="280">
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">
<param name="autostart" value="true">
<param name="maintainaspect" value="true">
<param name="nojava" value="true">
<param name="src" value="http://my_web_server/sample.ram">
<embed type="audio/x-pn-realaudio-plugin" width="350" height="280" nojava="true" console="Clip1" controls="ImageWindow" autostart="true" pluginspage="http://www.real.com/player/index.html">
</embed>
</object>
<br>
<!-- コントロールパネル領域 -->
<object id="Clip1-ctr" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="350" height="30">
<param name="src" value="http://my_web_server/sample.ram">
<param name="controls" value="ControlPanel">
<param name="autostart" value="true">
<param name="console" value="Clip1">
<param name="nojava" value="true">
<embed type="audio/x-pn-realaudio-plugin" width="350" height="30" pluginspage="http://www.real.com/player/index.html" controls="ControlPanel" autostart="true" console="Clip1" nolabels="true" nojava="true">
</embed>
</object>
</body>
</html> |
※コントロールパネル領域を表示する場合は、動画表示領域用とは別にobject要素を定義する必要がある。
※Media Player や QuickTime をページに埋め込むことも可能。
【動作確認】
・ http://my_web_server/sample_rm.html にアクセスして動画が再生されればＯＫ。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
streaming_test00.jpg