SMIL - 基本

最終更新日:2006年12月31日

　RealSystemG2で実行可能となるSMILの基本について簡単に解説いたします。

最もシンプルな例
相対URLの指定
順番再生の指定
同時再生の指定
同時再生時の終了タイミング指定
再生の繰り返し
<seq>と<par>タグの結合
クリップの開始と終了時間の指定
グループでの開始と終了時間の指定
内部クリップの開始と終了時間の指定
継続時間の指定
クリップ再生後の対応
言語選択の指定
転送レート選択の指定
プレゼンテーション情報の指定
再生リストの指定（管理）
文字コードの指定
基本的な領域レイアウト
背景カラーの指定
領域へのクリップの調整
z-indexを使用したオーバーラップ領域の順番
１クリップにリンクの指定
リンクしたクリップの表示先指定
クリップ内の指定領域からリンク指定
クリップ再生の時間軸割のリンク設定
SMILファイルへのリンク指定

１．最もシンプルな例

　最も単純なものは、クリップを順番に再生する方法です。

<smil>.....</smil>
=>　SMILによるマークアップの始まりと終わりを指定。（必須）
<body>.....</body>
=>　再生対象となるクリップは<body>.....</body>タグに挟んで指定する必要があります。（必須）

<audio src="URL"/>
=>　再生するクリップを指定する。ここでは、RealAudioファイルを指定。
再生可能はクリップの種類：
animation　=>　アニメーションクリップ。RealFlashで用いられるShockwave Flash（.swf）など。
audio　=>　RealAudio（.rm）などのオーディオ。
img　=>　JPEG（.jpg）またはGIF画像（.gif）
ref　=>　これ以外の属性が扱っていないものすべて。RealPixファイル（.rp)など。
text　=>　スタティックなテキスト（.txt）。
textstream　=>　ストリーミングRealText（.rt）
video　=>　連続的な動きを表示するビデオその他。RealVideo（.rm）など。

このサンプルを再生する　＝＞　Click Here!!

２．相対URLの指定

　クリップへのURL指定において、同一のサーバー上に各クリップが存在する場合は、<head>タグ内に定義するベースターゲットに関連させて指定することができる。

<head>.....</head>
=>　プレゼンテーションの情報を指定する目的や、クリップのレイアウトを定義する目的で使用します。
<meta/>
=>　プレゼンテーションの情報を指定します。ここでは、同一のサーバ上にあるクリップが格納されるベースターゲットの情報を記述するので、nameにbase、contentに各クリップが格納されている基本となるURLを指定しています。

このサンプルを再生する　＝＞　Click Here!!

３．順番再生の指定

　各クリップを順番に再生する場合の指定方法。
基本的な動作は１．で指定した方法を同じになります。

<seq>.....</seq>
=>　クリップの順番再生を指定。ここでは、RealAudioの順番再生を指定。

このサンプルを再生する　＝＞　Click Here!!

４．同時再生の指定

　複数のクリップを同時に再生する場合の指定方法。

<par>.....</par>
=>　クリップの同時再生を指定。ここでは、RealAudioとRealTextを同時再生。

このサンプルを再生する　＝＞　Click Here!!

５．同時再生の終了タイミング指定

　再生時間の異なるクリップを同時再生する場合の再生終了タイミングの指定方法。

<par endsync="first">.....</par>
=>　endsync属性に“first”を指定する事で、<par>タグ内で指定されるクリップのうち最初に再生が終了のものにあわせて<par>タグ内の再生全体が終了する。
　また、endsync属性に“last”を指定する事で、最後の再生が終了するものにあわせて<par>タグ内の再生全体が終了する。ただ、“last”指定はデフォルト指定でもあるため省略可能。

RealAudioは約１０．３秒の再生、RealTextは５秒の再生指定である。したがって、“first”の場合は５秒後に再生が終了する。

このサンプルを再生する　＝＞　Click Here!!(“first”指定)
このサンプルを再生する　＝＞　Click Here!!(“last”指定)

　さらに特定のクリップに対してIDを付与することで、再生終了タイミングをID指定で行う事が出来る。

<par endsync="id(endtext)">.....</par>
=>　endsync属性に“id(任意の文字列)”の指定、該当するクリップに同じ“id(任意の文字列)”を指定する（↓）。
<textstream id="endtext".../>
=>　対応するIDを指定。この場合、RealText(sbsmp5i.rt)にIDを設定。

RealAudio(2_114.ra)は約１０．３秒の再生、RealText(sbsmp5.rt)は５秒の再生、RealText(sbsmp5i.rt)は７秒の再生指定である。
したがって、“first”および“last”で指定できないクリップを指定する際に有効となる。

このサンプルを再生する　＝＞　Click Here!!(“id(任意の文字列)”指定)

６．再生の繰り返し

　特定のクリップを指定回数分だけ繰り返す指定。

<audio repeat="3" .../>
=>　repeat属性により繰り返し（リピート）回数を指定する。この場合は３回の繰り返しになる。
また、repeat属性を<par repeat="4" ../>や<seq repeat="5" ../>のように指定する事でそれぞれグループ毎に繰り返して再生する事も可能です。

このサンプルを再生する　＝＞　Click Here!!

７．<seq>と<par>タグの結合

　<seq>と<par>タグを組み合わせて使うことで、より複雑なプレゼンテーションを実現できます。

clip1=====>	clip2=====>	clip4=====>
	clip3=====>

clip1================>
clip2=====>	clip3=====>
clip4================>

８．クリップの開始と終了時間の指定

　特定のクリップの再生開始と終了時間を個別に指定。

<audio begin="10.0s" ...../>
=>　begin属性によりクリップの再生開始時間を指定。ここでは、プレゼンテーション開始から１０秒後に指定クリップの再生を開始。

このサンプルを再生する　＝＞　Click Here!!

<video begin="10.0s" end="30.0s" ...../>
=>　begin属性によりクリップの再生開始、end属性によりクリップの終了時間を指定。

このサンプルを再生する　＝＞　Click Here!!

９．グループでの開始と終了時間の指定

　<seq>や<par>タグのグループでの再生開始と終了時間を指定。

<par begin="10.0s" end="30.0s">
=>　<par>タグにbegin属性の指定でグループの再生開始、end属性によりクリップの終了時間を指定。
ここでは、プレゼンテーション開始から１０秒後に２つのクリップ（RealVideoとRealAudio)の同時再生を開始。そして、３０秒後に終了。

このサンプルを再生する　＝＞　Click Here!!

１０．内部クリップの開始と終了時間の指定

　特定のクリップ内部の部分再生が可能。
特定のクリップ内部の再生開始と終了時間を指定。

<video clip-begin="40.0s"clip-end="55.0s" ...../>
=>　clip-begin属性により、指定クリップの始めから４０秒の位置から再生開始。clip-end属性により、指定クリップの始めから５５秒の位置で終了。
つまり、プレゼンテーション開始の時点で指定クリップは４０秒目から再生を始めます。

　clip-begin、clip-end属性とbegin、end属性を組合せて指定することも可能です。

このサンプルを再生する　＝＞　Click Here!!

１１．継続時間の指定

　特定のクリップの再生（表示）継続時間を指定。

<img dur="10.5s".../>
=>　dur属性により、クリップの再生（表示）開始からの継続時間を指定。ここでは開始から１０．５秒後に終了。

このサンプルを再生する　＝＞　Click Here!!

１２．クリップ再生後の対応

　特定のクリップ再生（表示）後に、どのように対応するかを指定。

<img fill="remove" ...../>
=>　fill属性により、クリップ再生（表示）後の対応処理を指定。
remove：指定クリップの再生が終了すると画面から消える。（fill属性を指定しない場合は画面からクリップ表示が消えます。デフォルト設定）
freeze：指定クリップの再生が終了しても、画面から終了時の画像、映像が消えずに残る。

このサンプルを再生する（remove指定時）　＝＞　Click Here!!
このサンプルを再生する（freeze指定時）　＝＞　Click Here!!

１３．言語選択の指定

　<switch>.....</switch>タグとsystem-language属性（クリップタグ内）により、１つのSMILファイル内で各言語に対応したクリップの再生が可能になります。

　詳細は、[SMIL-RealAudio]のページを参照。

　RealPlayerG2側の設定にも関連します。

１４．転送レート選択の指定

　<switch>.....</switch>タグとsystem-bitrate属性（クリップタグ内）により、１つのSMILファイル内で各転送レートに対応したクリップの再生が可能になります。

　詳細は、[SMIL-RealAudio]のページを参照。

　転送レート毎にRealAudio/RealVideoファイルを作成（エンコード）して、それぞれのファイル（メタファイル等）に対するリンクをページに設定していました。（28.8Kbpsモデム用、ISDN(64Kbps)用のそれぞれのリンク）
　しかし、<switch>.....</switch>タグとsystem-bitrate属性を使用することで、１つのリンクに複数の転送レートのRealAudio/RealVideoファイルを関連付けることが可能になります。

　RealPlayerG2側の設定にも関連します。

１５．プレゼンテーション情報の指定

　SMILで作成するプレゼンテーションにタイトル、著者、著作権などの情報を指定。

<head>.....</head>
=>　タイトル、表示レイアウト等の指定宣言。
<meta name="....." content="....."/>
=>　タイトル、著者、著作権等を指定。ここでは、タイトル、著者、著作権そして電子メールアカウントを指定してます。
name属性は表題(title等）、content属性は内容を記述。
name属性にはtitle、author、copyrightのほかにも、英数字小文字で様々な情報を付加できます。
RealPlayerG2日本語版では日本語表示が可能になっています。
また、これらの情報はRealPlayerG2の[ヘルプ]->[このプレゼンテーションについて]で参照できると共に、[ファイル]メニューの履歴情報に<meta name="title" content="....."/>で指定したタイトル情報がリストアップされます。

このサンプルを再生する　＝＞　Click Here!!

１６．再生リストの指定（管理）

　プレゼンテーション情報のほかに、個々のクリップに対してタイトルなどを指定することが可能。
　個々のクリップにタイトルを指定することで、RealPlayerG2の再生リスト（日本語版）にリストアップすることが出来ます。

<audio title="Sound Clip No.1" ...../>
=>　title属性により、個々のクリップにタイトルを指定。ここで指定したタイトルが再生リストにリストアップされる。
title属性のほか、author、copyright、abstractの属性を指定できます。abstract属性にはクリップの概要を指定します。（RealPlayerG2：日本語版の時は日本語の指定も可能）

　RealAudio／RealVideoの各ファイルにはエンコード時にタイトル情報などが付加され、再生リストに反映されますが、ここで（SMIL）指定するタイトルなどの方が優先されます。
また、RealPixについても同様です。
　SMILで指定された情報とエンコード時に付加された情報の違いは、再生リストにリストアップされるタイミングです。
SMILで指定された情報はプレゼンテーションが再生される（SMILが読みこまれる）時にリストアップされますが、エンコード時に付加された情報は各クリップの再生が始まるときとなります。

このサンプルを再生する　＝＞　Click Here!!

１７．文字コードの指定

　タイトルなどの情報として次に挙げるものは、文字コードで指定する必要があります。

文字	コード
"　（クォーテーションマーク）	"
&　（アンパサンド）	&
'　（アポストロフィ）	'
<　（アングルブラケット）	<
>　（アングルブラケット）	>

１８．基本的な領域レイアウト

　RealPlayerのメインウィンドウ内の特定位置に、クリップを表示させるための指定。

<layout>.....</layout>
=>　<layout>タグにより、レイアウト指定の開始と終了を指定。
<root-layout height="240" width="320"/>
=>　<root-layout/>タグにより、RealPlayerのメインウィンドウサイズ（再生領域サイズ）を指定。ここでは、高さ：240pixel、幅：320pixel。
<region id="image" top="30" left="100" height="102" width="97"/>
=>　<region/>タグにより、特定クリップの再生領域を指定。id属性で<body>タグ内にある特定クリップとの関連付けをする。（下図参照）
<img region="image" ...../>
=>　region属性により、<layout>タグ内の<region/>で指定された再生領域と関連付けをする。（もちろん、指定するクリップは画像のほかにビデオ等も可能です）

ここで指定したレイアウト構成（実寸大）
基本的な領域レイアウト

このサンプルを再生する　＝＞　Click Here!!

１９．背景カラーの指定

　RealPlayerのメインウィンドウの背景色、各クリップ再生領域の背景色の指定。

<root-layout background-color="maroon" ...../>
=>　background-color属性により、RealPlayerのメインウィンド（再生領域）の背景色を指定。
<region background-color="#00FFFF" ...../>
=>　background-color属性により、クリップの背景色を指定。

背景色として指定可能は色は次の通り。
・RGB１６進数で表わしたカラー値（#RRGGBB)。
・RBG値に対応した以下のカラー名。
　　white (#FFFFFF)、silver (#C0C0C0)、gray (#808080)、black (#000000)、
　　Yellow (#FFFF00)、fuschia (#FF00FF)、red (#FF0000)、maroon (#800000)、
　　lime (#00FF00)、olive (#808000)、green (#008000)、purple (#800080)、
　　Aqua (#00FFFF)、teal (#008080)、blue (#0000FF)、navy (#000080)

このサンプルを再生する　＝＞　Click Here!!

２０．領域へのクリップの調整

　『<region/>タグにより指定された再生領域』と『関連付けられるクリップの表示サイズ（画像/映像サイズ）』が異なる場合は、fit属性により再生領域内でどのように表示させるか指定します。

　fit属性が指定されない場合は“hidden”となります。

fit属性に対する値	効果
fill	領域のサイズにあわせて、クリップを拡大縮小します。エンコーディングされたクリップと再生領域の縦横比が異なる場合には、イメージは歪みます。
hidden（default）	クリップのエンコーディングサイズのまま領域の上部左端に配置します。クリップが領域よりも小さい場合、残りの部分は領域の背景カラーになります。逆に、クリップが領域よりも大きい場合は、入りきらない領域は切り取られます。
meet	クリップを領域の上部左端に配置します。クリップの縦横比を保ちながら、領域内に収まるように拡大縮小します。残りの部分は領域の背景カラーになります。
slice	クリップを領域の上部左端に配置します。クリップの縦横比を保ちながら、一辺が領域と同じになるまで拡大縮小します。入りきらない領域は切り取られます。

２１．z-indexを使用したオーバーラップ領域の順番

　再生領域がオーバーラップ（重なり合う）する場合は、z-index属性を使用してそれぞれのクリップの前後関係を指定。

<region id="image1" z-index="2" ...../>
=>　<region/>タグにz-index属性を指定することで、再生領域の前後関係（順番）を指定。
z-index属性に指定する値が大きいほど前面に表示される。
ここでは、クリップ「acut_035.jpg」が最も前面に、その背面に「acut_036.jpg」、さらにその背面に「acut_049.jpg」を表示。

オーバーラップしない場合は、同じ値を指定できます。

このサンプルを再生する　＝＞　Click Here!!

２２．１クリップにリンクの指定

　クリップにリンクを指定する方法はいくつかあります。ここでは、１クリップ全体を他のクリップにリンク指定。

<a href="sample/2_105.ra">.....</a>
=>　<a>.....</a>タグにhref属性を使用して、リンク先（ターゲット）のクリップを指定。
<a>と</a>との間にリンク元（ソース）のクリップをSMILの記述方法で指定。
ここでは、画像クリップ「acut_036.jpg」の再生中に、表示されている画像をクリックするとRealAudioファイル「2_105.ra」に再生が変わります。

このサンプルを再生する　＝＞　Click Here!!

２３．リンクしたクリップの表示先指定

　リンクしたクリップの表示先／表示方法を指定。
表示先をRealPlayerにするかブラウザにするかを指定できます。

<a href="sample/2_105.ra" show="replace">
=>　<a>.....</a>タグにshow属性を指定することで、表示先／表示方法を指定。
指定可能はshow属性の値は次の通り。
replace　：　リンク先のクリップをRealPlayerの再生中クリップと置きかえる。（show属性を指定しない場合のデフォルト値）
new　：　リンク先のクリップ（Webページ）をデフォルトのブラウザに表示します。newの場合はRealPlayerの再生を継続します。
pause　：　リンク先のクリップ（Webページ）をデフォルトのブラウザに表示します。pauseの場合はRealPlayerの再生を一時停止します。

このサンプルを再生する（show属性にreplace。結果は22.と同様）　＝＞　Click Here!!

２４．クリップ内の指定領域からリンク指定

　１クリップ内の特定領域にリンクを指定。
クリップ全体にリンクが指定される<a>.....</a>タグとは異なります。

<anchor href="http://www.jp.real.com/" coords="30,16,235,36" show="new"/>
=>　<anchor/>タグのhref属性でリンク先（ターゲット）を指定。
coords属性でクリップ（ここでは<img>タグで指定のクリップ）内の領域指定を行う。
　左から順にクリップの「左からリンク領域左端までのpixel数」、「上からリンク領域上端までのpixel数」、「左からリンク領域右端までのpixel数」、「上からリンク領域下端までのpixel数」となる。
show属性の指定方法は『項目２３．』と同じ。

　<anchor/>タグを使用するとき、クリップの指定方法は通常の<img/>、<video/>、<ref/>などとは異なり、<img>....</img>、<video>.....</video>、<ref>.....</ref>のようにして<anchor/>タグを挟みこむ。

このサンプルを再生する　＝＞　Click Here!!

２５．クリップ再生の時間軸割のリンク指定

　１クリップの再生中、特定の時間割毎にリンクの切り替えを指定。

<anchor href="URL" begin="0s" end="10s" show="new"/>
=>　<anchor/>タグのhref属性でリンク先（ターゲット）を指定。
begin属性でクリップの再生時間軸とリンク先（ターゲット）の関連付けの開始。
end属性でクリップの再生時間軸とリンク先（ターゲット）の関連付けの終了。
show属性の指定方法は『項目２３．』と同じ。

　ここでは、ビデオクリップ「lmtower.rm」の再生が開始されてから、１０秒後まで「横浜市のWebサイト」、１０秒後からクリップの最後まで「ランドマークタワーの紹介ページ」にそれぞれリンクしています。

このサンプルを再生する　＝＞　Click Here!!

２６．SMILファイルへのリンク指定

　再生中のSMILファイル内へのリンク、および、他のSMIL内の特定グループへのリンク指定。

SMILファイル１：ベースとなるSMILファイル

<par id="text_and_video">....</par>
=>　<par>タグのid属性を使用して、リンク先（ターゲット）に名前付与（関連付け）。
他のSMILファイル内でも同様にid属性を使用して、リンク先（ターゲット）に名前付与（関連付け）を行う（下記のSMILファイル２を参照）。
<a href="#text_and_video">
=>　<a>タグのhref属性に“#”を先頭につけた名前を指定（リンク先）。<par>タグ内id属性で付与したもの。
この場合は、再生中のSMILファイル内へのリンク指定。
<a href="sbsmp262.smi#eizou">
=>　他のSMILファイルの特定グループ内へのリンクは、SMILファイルに続けて“#”を先頭につけた名前を指定（リンク先）。

SMILファイル２：リンク先（ターゲット）のSMILファイル

このサンプルを再生する　＝＞　Click Here!!
　ただし、現在、他のSMILファイルへのリンクではうまく再生できていません。
　自PC内および外部設置のBasicServerG2では実行可能ですが、通常のWebサーバー（HTTP）だとファイル読みこみ時に終了。

＜トップページへ＞　＜SMILのトップページへ＞