動画ファイル埋め込み(ストリーミング配信)

ストリーミング配信を行う場合に、動画ファイルをWEBページに埋め込む方法を記述する。
以下では、RealPlayer用の動画ファイル(拡張子rm)を、WEBページに埋め込んだRealPlayerで再生する為の方法を記載する。
また、ストリーミング配信を前提とする為、プログレッシブダウンロードする場合の説明については記述していない。
※配信にはストリーミングサーバが必要である。⇒ ストリーミングサーバ構築

【構成 および ファイル配置】

配置するサーバファイルファイル説明
WEBサーバHTMLWEBページ上から再生できるようにRealPlayerを埋め込んだもの
メタファイルストリーミングサーバ上の動画ファイルへのPATHを記したもの
ストリーミングサーバ動画ファイル実際に再生する動画ファイル

 ※各ファイルの参照関係
  [HTML] -> [メタファイル] -> [動画ファイル]

【ファイルの記述、配置】
 1.動画ファイルの設置
  ・動画ファイルをストリーミングサーバに設置する。

ファイル名設置場所説明
sample.rmストリーミングサーバの動画設置用ディレクトリ
(例)/usr/local/movies/sample.rm
rtsp://my_stream_server/sample.rm でアクセス可能な事


 2.メタファイルの記述、および設置
  ・下記のようにメタファイル(sample)を作成、設置する

ファイル名設置場所ファイル内容
sample.ramWEBサーバの公開ディレクトリ以下
(例) http://my_web_server/sample.ram
rtsp://my_stream_server/sample.rm

  【動画ファイルの種類による設定の違い】

動画ファイルの拡張子メタファイル拡張子メタファイル記述例
rmramrtsp://サーバー名/パス/音声・動画ファイル名.rm
wmvwvx<asx version="3.0">
    <entry>
        <ref href="mms://サーバー名/パス/音声・動画ファイル名.wmv" />
    </entry>
</asx>
asfasx<asx version="3.0">
    <entry>
        <ref href="mms://サーバー名/パス/音声・動画ファイル名.asf" />
    </entry>
</asx>


 3.HTMLファイルの記述、および設置

ファイル名設置場所ファイル内容
sample_rm.htmlWEBサーバの公開ディレクトリ以下
(例) 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 にアクセスして動画が再生されればOK。

streaming_test00.jpg


添付ファイル: filestreaming_test00.jpg 139件 [詳細]

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-09-16 (水) 10:28:12 (4394d)