HTMLでCAYINメディアプレーヤーを使う > メディアプレーヤーのタグとパラメーター

メディアプレーヤーのタグとパラメータ

CAYINのメディアプレーヤーは、FlashなどのHTMLタグを埋め込むことができるので、メディアフォルダ内のメディアファイルを再生したり、リアルタイムでストリーミング再生することが可能です。 また、HTMLにタグを定義することで、CAYINのメディアプレーヤーをブラウザに埋め込むことができます。

HTMLにメディアプレーヤーを含めることができる便利なタグをいくつか用意しているので、以下の表と例をご参考ください。

HTMLコード

1
2
3
4
5
<object type="TYPE Attribute" height=" Object height(pixel)" width=" Object width(pixel)">
<param name="NAME Attribute " value=" value ">
<param name="NAME Attribute " value=" value ">
<param name="NAME Attribute " value=" value ">
</object">
ページのトップへ戻る

TYPE属性

属性 属性値 説明
Type video/mpeg
video/main
video/sub
video/video-in

ユーザーは、1つのHTMLページで複数の画面ゾーンを再生することができます。

video/main:ハードウェアデコード方式を採用しています。 ハードウェア解凍を有効にしている場合(再生>再生パラメータ)、ハードウェアアクセラレーションにより、より良いパフォーマンスが得られます。

video/sub:ソフトウェアによるデコードを採用しており、ハードウェアによるデコードに比べ、映像フォーマットの互換性に劣る場合があります。

video/video-in は、SMPプレーヤーのデフォルトのビデオインデバイスを再生することを意味します。

HTMLファイルで再生する映像を2つ指定する場合、映像の解像度が高い方の項目をmainに指定することをお勧めします。

SMPプレーヤーがサポートする映像の仕様については、プレーヤーのデータシートをご参照ください。

ページのトップへ戻る

NAME属性

属性 属性値 説明
src

file://folder/video_filename
mms://ip_address/mms_url
http://ip_address/http_url
rtb://port
rtb://multi_cast_ip:port
rtp://port
rtp://multi_cast_ip:port

play-local-all
play-local-schedule-1
play-local-schedule-2
play-server-schedule-1

play-server-schedule-2

file: メディアフォルダ内のファイルを再生します
mms: MマイクロソフトMMSストリーミング
http: httpストリーミング
rtb: CAYIN RTBストリーミング配信
rtp: リアルタイム トランスポート プロトコル ストリーミング
play-local-all: メディアフォルダ内のすべてのファイルを再生します。
play-local-schedule-1: SMPのローカルスケジュールに従ってメディアフォルダ内のファイルを再生します。 この機能は play-local-all と共有することはできません。
play-server-schedule-1: CMSのセントラルスケジュールに従ってメディアフォルダからファイルを再生します。 この機能は play-local-all と共有されません。

注意事項

<src >属性の使い方については、裏面の例をご参照ください。

loop 1(default)
0
繰り返し再生の有無を指定します
fullscreen 1
0(default)
フルスクリーンで再生するように指定します。
hidden 1
0(default)
デフォルト(0に設定)では、画面は非表示になりません。 プレーヤーを非表示にしても、ファイルは再生され、音声はミュートされません。
ratio auto(default)
4:3 / 1:1 / 16:9 / 2.11:1
メディア再生ウィンドウの比率。
play-folder-all 1
0(default)

指定されたフォルダ内のすべてのコンテンツを再生します。
例:

<param name=" play-folder-all " value=" folder_name ">
play-next-item 1
0(default)
映像の再生が終了すると、ウェブプレイリストの次のアイテムが再生されます。 この関数を使用した場合、loopパラメータは強制的にFalseになります。
random-playlist 1
0(default)
プレイリストの内容を自由に再生することができます。
audio 1(default)
0

オーディオのオン/オフを切り替えます。

HTMLで再生する映像を2つ設定し、メイン再生映像をtrueに設定すると、サブ再生要素のオーディオオプションが自動的にオフになります。
audio-output-id SMP-6000:
  • 1 (green, default)
  • 2 (orange)
  • 3 (black)
  • 4 (pink)
SMP-2000:
  • 1 (green, default)
  • 2 (pink)

この機能はSMP-6000/SMP-2000でのみ使用可能です。

SMP-6000/SMP-2000でメディアプレーヤーをコントロールし、本体背面の各コネクターに音声を送ることができます。
ページのトップへ戻る

例 1: メディアフォルダー内のvideo.mpgを繰り返し再生します。

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://video.mpg">
<param name="loop" value="1">
<param name="ratio" value="4:3">
</object>
</body>
</html>

例2:メディアフォルダ内のvideo.mpgをフルスクリーンで繰り返し再生します。

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://video.mpg">
<param name="loop" value="1">
<param name="fullscreen" value="1">
</object>
</body>
</html>

例3:マルチメディアフォルダ内の複数の映像ファイルを再生する場合 プレイリストの内容を再生する場合は、複数のparamタグを追加し、nameを<src>で指定します。
下の例では、1.mpg, 2.mpg, 3.mpg, 4.mpg, 5.mpg を順番に再生します。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://1.mpg">
<param name="src" value="file://2.mpg">
<param name="src" value="file://3.mpg">
<param name="src" value="file://4.mpg">
<param name="src" value="file://5.mpg">
</object>
</body>
</html>

例4:メディアフォルダ内の映像をすべて再生する場合
メディアフォルダ内のすべてのビデオファイルを再生したい場合は、属性<play-local-all>を使用すると、フォルダ内のすべての映像を自動的に順番に再生することができます。

1
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="play-local-all" value="1">
</object>
</body>
</html>

例5:メディアフォルダ内の複数のビデオを再生し、終了したら次のウェブプレイリストに自動的に跳びます。
以下の例では、プレーヤーがブラウザに通知して、次のウェブプレイリストの項目に移動します。 ウェブプレイリストのすべてのアイテムの再生時間を"常に"に設定することをおすすめします。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://1.mpg">
<param name="src" value="file://2.mpg">
<param name="src" value="file://3.mpg">
<param name="play-next-item" value="1">
<param name="loop" value="0">
</object>
</body>
</html>

例6:CMSのセントラルスケジュールからメディアプレイリストを制御する場合
メディアプレーヤーがCMSからプレイリストをダウンロードできるようにするために、属性play-server-scheduleに設定します。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://1.mpg">
<param name="src" value="file://2.mpg">
<param name="src" value="file://3.mpg">
<param name="play-server-schedule" value="1">
</object>
</body>
</html>
注意事項

CMSサーバーバージョンが5.5以降の場合、<param name="play-server-schedule" value="2"> を使用すると、2番目のメディアセントラルスケジュール(Multimedia-2)を再生できます。

例7:サブディレクトリ内の全ビデオをランダムに再生する場合
play-folder-all属性に設定すると、メディアプレーヤーはメディアフォルダのサブディレクトリにあるメディアファイルを再生できるようになります。 random-playlistでは、映像の再生順をランダムにすることができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
<object type="video/main" width="320" height="240">
<param name="src" value="file://1.mpg">
<param name="src" value="file://2.mpg">
<param name="src" value="file://3.mpg">
<param name="play-folder-all" value="folder_name">
<param name="random-playlist" value="1">
</object>
</body>
</html>

例8:1つのウェブページで2つの映像を同時に再生する場合
SMPは、video/main属性とvideo/sub属性を用いて、2つの映像を再生するように設定することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
</head>
<body>
<object type="video/main" width="640" height="480">
<param name="src" value="file://1.mpg">
</object>

<object type="video/sub" width="320" height="240">
<param name="loop" value="1">
<param name="src" value="file://2.mpg">
<param name="audio" value="0">
</object>
</body>
</html>

例9:BGMを流す
MP3ミュージックの再生など、非表示のメディアオブジェクトを作成する場合は、OBJECTタグのsize属性を制御するCSSルールを作成し、パラメータ名"hidden"の値を1に設定する必要があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<style type="text/css">
object {
visibility: visible;
}
object.hiddenObject {
visibility: hidden !important; width: 0px  !important; height: 0px  !important; margin: 0px  !important;
padding: 0px  !important;
border-style: none  !important; border-width: 0px  !important; max-width: 0px  !important;
max-height: 0px  !important;
}
</style>
</head>
<body>
<object type="video/main" width="320" height="240" class="hiddenObject">
<param name="src" value="file://1.mpg">
<param name="hidden" value="1">
</object>
</body>
</html>

例10:ビデオイン映像の再生

1
2
3
4
5
6
7
8
<html>
<head>
</head>
<body>
<object type="video/video-in" width="320" height="240">
</object>
</body>
</html>
ページのトップへ戻る