Customize control bar out of player on webpage with HTML

Since PlayerDIY Web Player V2.3, PlayerDIY Javascript API is available for its users to customize player skin, add advertisement, watermark and control player, advertisement, watermark on html page. PlayerDIY Javascript API is an easy-to-use object-oriented API, with which, its users can interact with player use html syntax.

The unnamed object way of writing JavaScript to define PlayerDIY JS API.

function PlayerCall(id, cmd) {
return document.getElementById(id).mwplayer_call_func(cmd);
}

The default demo which customized with PlayerDIY JS API

Player state: --

Play | Pause | Stop | Mute | Unmute | PlayList | Previous | Next

Demo with customized control bar outside the player (the control bar was customized with html and PlayerDIY javascript API)

		0 10 20 25 30 33 40 50 60 66 70 75 80 90 100
0 10 20 25 30 33 40 50 60 66 70 75 80 90 100

Below is the tutorial about how to use this Javascript API to implement the above second player.

1. Customize a web flv player can work with PlayerDIY JS API and has no control bar, with PlayerDIY Web Player.

Step 1: Customize a web FLV player has no control bar. To customize a web FLV player has no control bar, you only need to choose the “none” template as the player skin on the follow interface.

Step 2: Hide playlist. Uncheck the “Show list at first” and “Show list at last” options on the following interface.

Step 3: Check the “Event” option on the following interface to make customized web FLV player can work with PlayerDIY JS API.

Step 4: Publish the customized web FLV player, then you can make more settings of it on webpage with PlayerDIY JS API.

Note: PlayerDIY JS API only works online on a webpage on a server. This is a security feature of the flash plugin, and can not be changed.

2. Customize web FLV player with PlayerDIY JS API

About how to customize above web FLV player with PlayerDIY JavaScript API, please refer to this webpage code source. Thank you!

Download The Latest PlayerDIY Web Player