Below is a simple example of a HTML web page that has a captioned Flowplayer with a playlist of two videos that are set up to play sequentially.
You will need to download and install the Playlist Plugin (flowplayer.playlist-3.0.8.min.js) as well as the Controlbar Plugin(flowplayer.controls-3.0.2.min.js)
<html> <head> <title>Flowplayer Demo with Captions and a Playlist</title> <script src="http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.6.min.js"></script> <script src="js/flowplayer.controls-3.0.2.min.js"></script> </head> <body> <!-- player container--> <a href="http://area51.3playmedia.com/tole/home-page.mp4" style="display:block;width:425px;height:300px;" id="player"> </a> <!-- controlbar container --> <div id="player" class="player"></div> <script language="JavaScript"> window.onload = function() { $f("player", "http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.7.swf", { // don't start automatically clip: { autoBuffering: true }, // playlist with two entries playlist: [ { url: 'http://area51.3playmedia.com/tole/home-page.mp4',autoPlay: false, captionUrl: 'http://area51.3playmedia.com/tole/home-page.srt'}, {url: 'http://area51.3playmedia.com/tole/50lessons.flv', autoPlay: true, captionUrl: 'http://area51.3playmedia.com/tole/50lessons.srt'} ], // disable default controls plugins: { controls: { playlist: true } , captions: { url: 'http://area51.3playmedia.com/tole/flowplayer/flowplayer.captions-3.2.3.swf', captionTarget: 'content' }, content: { url:'http://area51.3playmedia.com/tole/flowplayer/flowplayer.content-3.2.0.swf', bottom: 25, width: '80%', height:40, backgroundColor: 'transparent', backgroundGradient: 'low', borderRadius: 4, border: 0, textDecoration: 'outline', style: { 'body': { fontSize: '14', fontFamily: 'Arial', textAlign: 'center', color: '#ffffff' } } } } // install HTML controls inside element whose id is "player" }).controls("player"); //$f("player1").playlist("div.clips:first", {loop:true,playOnClick: false}); }; </script> </body> </html>
0 Comments