| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|---|
| 5 | <title>FlowPlayer</title>
|
|---|
| 6 | <script type="text/javascript" src="swfobject.js"></script>
|
|---|
| 7 | <script type="text/javascript">
|
|---|
| 8 | /*
|
|---|
| 9 | * Init and setup FlowPlayer. This example file shows 'advanced' features like
|
|---|
| 10 | * playlists and configuring with JavaScript. FlowPlayer.html is a simpler example.
|
|---|
| 11 | *
|
|---|
| 12 | * NOTE: This file has been tested to work on FireFox only. It has some problems on IE.
|
|---|
| 13 | */
|
|---|
| 14 |
|
|---|
| 15 | var flowPlayer1;
|
|---|
| 16 | function init() {
|
|---|
| 17 | if (document.getElementById) {
|
|---|
| 18 | flowPlayer1 = document.getElementById("FlowPlayer");
|
|---|
| 19 | }
|
|---|
| 20 | setFlowPlayerConfig();
|
|---|
| 21 | }
|
|---|
| 22 |
|
|---|
| 23 | // wait for the page to fully load before initializing
|
|---|
| 24 | window.onload = init;
|
|---|
| 25 |
|
|---|
| 26 |
|
|---|
| 27 | function setFlowPlayerConfig() {
|
|---|
| 28 | flowPlayer1.setConfig(fpConf);
|
|---|
| 29 | }
|
|---|
| 30 |
|
|---|
| 31 | function clipSelected(clipIndex) {
|
|---|
| 32 | flowPlayer1.ToClip(clipIndex);
|
|---|
| 33 | flowPlayer1.DoPlay();
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | // Playlist.
|
|---|
| 37 | var clips = [
|
|---|
| 38 | { name: 'ClickToPlay', url: 'http://www.kolumbus.fi/apiirain/video/resources/main_clickToPlay.jpg', overlayId: 'play' },
|
|---|
| 39 | { name: 'Honda ad', url: 'http://flowplayer.org/video/honda_accord.flv', controlEnabled: false, linkUrl: 'http://api.blogs.com/flow?haa\u0026foo=bar', linkWindow: '_self' },
|
|---|
| 40 | { name: 'Skiing in ounasvaara', url: 'http://flowplayer.org/video/ounasvaara.flv' },
|
|---|
| 41 | { name: 'New lake', url: 'http://www.sunsetcities.com/sunset-park/new-lake/09230031.jpg' },
|
|---|
| 42 | { name: 'Sunset', url: 'http://www.ashdown-eyes.co.uk/28dec4-j.JPG', duration: 10 },
|
|---|
| 43 | { name: 'Chaco sunset', url: 'http://www.photo.net/photo/pcd1666/chaco-sunset-74.3.jpg', duration: 10 }
|
|---|
| 44 | ];
|
|---|
| 45 |
|
|---|
| 46 | // FlowPlayer configuration
|
|---|
| 47 | var fpConf = {
|
|---|
| 48 | // for FMS:
|
|---|
| 49 | // streamingServerURL: 'rtmp://cyzy7r959.rtmphost.com/flowplayer',
|
|---|
| 50 | // for red5:
|
|---|
| 51 | // streamingServerURL: 'rtmp://localhost:1935/oflaDemo',
|
|---|
| 52 | // thumbsOnFLV: true,
|
|---|
| 53 | playList: clips,
|
|---|
| 54 | showPlayList: false,
|
|---|
| 55 | baseURL: '',
|
|---|
| 56 | autoPlay: true,
|
|---|
| 57 | autoBuffering: true,
|
|---|
| 58 | startingBufferLength: 5,
|
|---|
| 59 | bufferLength: 10,
|
|---|
| 60 | loop: true,
|
|---|
| 61 | hideControls: false,
|
|---|
| 62 | initialScale: 'fill',
|
|---|
| 63 | showPlayListButtons: true,
|
|---|
| 64 | useNativeFullScreen: true
|
|---|
| 65 | }
|
|---|
| 66 |
|
|---|
| 67 | </script>
|
|---|
| 68 | </head>
|
|---|
| 69 | <body bgcolor="#CCCCCC">
|
|---|
| 70 |
|
|---|
| 71 | <div id="flowplayerholder">
|
|---|
| 72 | You need to have the <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a> installed and
|
|---|
| 73 | a browser with JavaScript support.
|
|---|
| 74 | </div>
|
|---|
| 75 | <script type="text/javascript">
|
|---|
| 76 | // <![CDATA[
|
|---|
| 77 |
|
|---|
| 78 | var fo = new SWFObject("FlowPlayer.swf", "FlowPlayer", "500", "400", "7", "#ffffff", true);
|
|---|
| 79 | // need this next line for local testing, it's optional if your swf is on the same domain as your html page
|
|---|
| 80 | fo.addParam("allowScriptAccess", "always");
|
|---|
| 81 | fo.addParam("allowFullScreen", "true");
|
|---|
| 82 | fo.addParam("flashVars", "config={configInject: true}");
|
|---|
| 83 | fo.write("flowplayerholder");
|
|---|
| 84 |
|
|---|
| 85 | // ]]>
|
|---|
| 86 | </script>
|
|---|
| 87 |
|
|---|
| 88 |
|
|---|
| 89 | <table>
|
|---|
| 90 | <tr><td>Splash</td><td><a href="javascript: clipSelected(0)">Play</a></td></tr>
|
|---|
| 91 | <tr><td>Honda ad (with disabled controls and a linkURL) </td><td><a href="javascript: clipSelected(1)">Play</a></td></tr>
|
|---|
| 92 | <tr><td>Skiing</td><td><a href="javascript: clipSelected(2)">Play</a></td></tr>
|
|---|
| 93 | <tr><td>New lage (image that pauses the player when advancing from previous clip)</td><td><a href="javascript: clipSelected(3)">Play</a></td></tr>
|
|---|
| 94 | <tr><td>Sunset (image shown 10 seconds)</td><td><a href="javascript: clipSelected(4)">Play</a></td></tr>
|
|---|
| 95 | <tr><td>Chaco sunset (image shown 10 seconds)</td><td><a href="javascript: clipSelected(5)">Play</a></td></tr>
|
|---|
| 96 | </table>
|
|---|
| 97 |
|
|---|
| 98 | </body>
|
|---|
| 99 | </html> |
|---|
