Introduction: Ext Playlist Plugin of Moyea Web Player provides easy way to enable user to customize personalized playlist (including Youtube-look playlist) outside web flash video player, and put it on anywhere of the webpage they want it to be. Key Features: 3 flexible ways to create any customized-look external playlist. Multiple external playlists can be created for one flash video player. Supports to display video thumbnail, video title, video description and length by default. Note: The generated external playlist is based on web server, so the final effect can only be viewed on web server. Limitation of free trial version: A watermark with hyperlink appears at the right of the custom FLV player Where this plugin appears: After installation, this Ext Playlist Plugin will appear on the following interface of Moyea Web Player. To create Youtube-look external playlist for Web FLV player, when customizing flash video player with Moyea Web Player, you also need to do the following extra steps. 1. Fill the “Caption†form to make the external playlist show the video information (like the name, description and the length). The format for writing the video information is: video name----video description----video length, for example the first video in the above demo, we fill “Ice Age III----Dawn of the Dinosaurs Trailer----02:24†in the form 2. Choose “None†as the value of the “video list style†option on the following interface to remove the interior playlist of the custom flash video player. 3. Choose “vertical-list†from style list and give it an ID (this ID can not be the same as other element’s ID on the webpage). Here we named it “vertical-list†for example. Then click “Submitâ€. 4. After publishing and embedding the customized flash video player into webpage, add the following code to anywhere you want the customized playlist to be on the web page that the flash video player is embedded in. Then we can get a flash video player with the external playlist. <div id="vertical-list" style="position:absolute;width:200px;height:437px;right:150px;top:153px;overflow:auto;"> </div> Code (markup): Information about the style lists on setting page: You might have found that this plugin provides three style lists for choosing. Then what’s the difference between them? The information below will give you the answer. 1. vertical-list: This option provides the easiest way for customizing external playlist, all you need to do is give it an ID and click “Submit†button. But with this option, there is no way to edit the playlist style to match your website, as the .css file of it is hosted in our web server. However, you can download this .css file here and edit it as the way you want, but in this situation, you have to choose “vertical-list customize†on the setting page. 2. vertical-list customize: If you want to edit the .css file to match your web style or want to host the .css file in your own web sever, you have to choose this option, and put the file path into the “CSS†form to point to it, for example: mwplayer_extplaylist_vertical.css. note: this css file must be in the same directory with webpage on which display the custom playlist. Note: a. Please do not change the ID or class name in the .css file. Otherwise, it’ll not work with Moyea Web Player 3. customize: This option is designed for professional users who can write .css code or JS to customize the external playlist. You can put anything into the form to customize your playlist. Interpretations of the terms on setting page: * Style: the code for customizing playlist style. It gives a basic structure and style form that would apply to all the items in the list and it can be adopted repeatedly if there is more than one item. Please see the example below * Begin Style: the code before “Style†code, e.g.: <table> or <div> * End Style: the code behind “Style†code, e.g.: </table> or </div> * Begin JS: the JS code before “Style†code * End JS: the JS code behind “Style†code * CSS: indicates the path of the .css file for the playlist * JS: indicates the path of the JS file you write for the playlist For example, if you choose this option to implement above demo, then you only need to put the path of the .css file into the “CSS†form, and fill the following code into the “Style†form. Code for “Style†form: <div class="grey{index%2}" onclick="{play_item_func}"> <table border="0" cellspacing="0" cellpadding="0"><tr> <td><img src="{image}" /></td> <td><dl> <dt class="mwplayer_extplaylist_vertical_player_title">{caption}</dt> <dd class="mwplayer_extplaylist_vertical_player_say">{caption.1}</dd> <dd class="mwplayer_extplaylist_vertical_player_time">{caption.2}</dd> </dl></td></tr></table></div> Code (markup): Interpretations of the terms in the above code: * index: indicates video index in playlist, directly specify which video to be played in playlist * index+n: indicates index plus n * index%n: indicates index modulo n * play_item_func: the function for player to play the selected video * image: A picture of a video, which will show in the playlist and show on the screen before the video playing. * caption: indicates the video name or video tittle * caption.n: indicates subsections of caption, divided by “----â€, the value can be totally customized by customer themselves. Please refer to the first step of above tutorial “Fill the captionâ€. Please click here to learn more information about other terms on "Media" interface of Moyea Web Player. Please check the following 3 examples to view more possible playlist style you can customize with Moyea Ext Playlist Plugin. http://playerdiy.com/test/extplaylist/1/ http://playerdiy.com/test/extplaylist/2/ http://playerdiy.com/test/extplaylist/3/
Below is the screenshot of a Youtube-look external playlist (the red border area) that generated by Ext Playlist Plugin of Moyea Web Player.