Media Player Tag and Attributes

CAYIN's Media Player can be embedded into HTML tag, like Adobe Flash. You can play media files in Media Folder or real-time streaming by using CAYIN's media player. You can embed CAYIN's media player into browser by defining the <object> tag in HTML. It provides you with great flexibility to design your own presentations.

We provide many useful Tags which you can include in your HTML page to control CAYIN Media Player. Please refer to the tables and examples in the following sections.

HTML Code
TYPE Attribute
NAME Attribute
Examples

HTML Code

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 Attribute

Attribute	Attribute Value	Note
Type	video/mpeg video/main video/sub	Users can play two videos in one HTML page. video/main represents the main video; video/sub represents the secondary video. If you decide to play two videos in one HTML page, we suggest that you assign the video with larger resolutions as the main video. We do not suggest you play two videos at the same time when you play Full HD (high resolution) video.

NAME Attribute

Attribute

Attribute Value

Note

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

file: play files in Media Folder
mms: Microsoft MMS streaming
http: http streaming
rtb: CAYIN RTB streaming
rtp: Real-time Transport Protocol streaming

Note
About src attribute usage, please see examples in the following section.

loop

1 (default)
0

Assign to play video repeatedly.

fullscreen

1
0 (default)

Display full-screen video.

hidden

1
0 (default)

By default (setting 0), the screen will not be hidden. When the player is hidden, the file will still be played and the sound will not be muted, if available.

ratio

auto (default)
4:3 / 1:1 / 16:9 / 2.11:1

Aspect ratio of the media player window.

play-local-all

1
0 (default)

Play all files in the Media Folder.

play-server- schedule

1
2
0 (default)

Play files in Media Folder according to CMS's Central Scheduling settings. This option cannot be used with play-local-all.
1: Play first multimedia central scheduling.
2: Play second multimedia central scheduling.
0: Disable central scheduling (default)

play-folder-all

1
0 (default)

Play all files in the selected folder.
Example:

play-next-item

1
0 (default)

Play next Web Playlist item when video playlist finishes in this page.
This option excludes loop option (loop must be false).

random-playlist

1
0 (default)

Play all items in a playlist randomly.

audio

1 (default)
0

Turn on / off sounds. In the case of two videos in a HTML page, the audio of sub-video will automatically be turned off, when you set true for the main video.

audio-output-id

SMP-6000:

1 (green, default)
2 (orange)
3 (black)
4 (pink)

SMP-2000:

1 (green, default)
2 (pink)

This option is for SMP-6000 / SMP-2000 only.
You can control Media Player in SMP-6000 / SMP-2000 and send audio to different connectors at back-panel.

Examples

Example 1: Play the file, video.mpg, in the Media Folder repeatedly

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>

Example 2: Play the file, video.mpg, in the Media Folder repeatedly and display in full screen

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>

Example 3: Play several video files in the Media Folder repeatedly If you want to play many items, please add multiple param tag and set the name as src.

In the following example, the media player will play video files in the sequence of 1.mpg, 2.mpg, 3.mpg, 4.mpg, and 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>

Example 4: Play all video files in the Media Folder

If you want to play all files in the Media Folder, you can use the attribute play-local-all. Then the media player will play all files in the alphabetical order.

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>

Example 5: Play several video files in the Media Folder and move automatically to the next Web playlist after playing the previous one.

In the following example, the player will notify the browser and move to next web playlist item. We suggest you set the duration of all items in a web playlist as Always.

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>

Example 6: Control the playlist by CMS's central scheduling

The media player will download the playlist in CMS when you use the tag 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>

Note
You can use <param name="play-server-schedule" value="2"> to play the 2nd multimedia central scheduling (Multimedia-2) in CMS server version 5.5 or later.

Example 7: Play all videos in a sub-folder and play files randomly

The media player will play files in a sub-folder of Media Folder with the attribute play-folder-all. You can also play the video files randomly with the attribute 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>

Example 8: Play two videos in one web page. SMP can play two videos in one web page by using attributes, video/main and video/sub.

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>

Example 9: Play background music

If you want to hide a media player and only play music, e.g. MP3, you have to create a CSS rule to control the attributes of OBJECT tag, and set the value of param name hidden as 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>

Example 10: Play video input

1 2 3 4 5 6 7 8	<html> <head> </head> <body> <object type="video/video-in" width="320" height="240"> </object> </body> </html>