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
13var flowPlayer1;
14function init() {
15	if (document.getElementById) {
16		flowPlayer1 = document.getElementById("FlowPlayer");
17	}
18	setInitialConfig();
19}
20
21// wait for the page to fully load before initializing
22window.onload = init;
23
24function setInitialConfig() {
25	fpConf.playList = clips;
26	fpConf.autoPlay = false;
27	fpConf.autoBuffering = false;
28	flowPlayer1.setConfig(fpConf);
29}
30
31/*
32 * This is the playlist with FLV videos and images. The images can have a duration property
33 * and the flv video files can have start and end properties that give the starting and
34 * ending positions in seconds. All these attributes (duration, start, end) are optional.
35 *
36 * The start and end attributes really only work with the Flash Media Server. I have had
37 * problems when thesting using Red5.
38 */
39var clips = [
40	{ name: 'ClickToPlay', url: 'http://www.kolumbus.fi/apiirain/video/resources/main_clickToPlay.jpg' },
41	{ name: 'Stripper Falling From Poll', url: 'http://zippy1981.is-a-geek.com:8081/flv.php?movie_id=167', start: 0, end: 20},
42	{ name: 'Honda accord', url: 'honda_accord.flv' },
43	{ name: 'Ounasvaara', url: 'ounasvaara.flv', start: 15, end: 23 },
44	{ name: 'Milton Friedmanon', url: 'http://vp.video.google.com/videodownload?version=0&secureurl=twAAAD3Nu3qi35Sq20PncHx_N85T906JGae5xZmkTv_R_ZCcDGA0yTapUR0RwupDbpZcNbjY-MdNMAT-VQC4U0TE9SyMNYYG0fdqwToIx6gMunzvEyDd8gwNyiwY-A1-8c4tpls2xEOIv0BZ7sO-aEEGjzV9j16n4enqCZ8SV5898qQ3MjHGsemiY96XrIp9rFSkbKMspA5IpOwOCT4Ts32UnOwdzUnZWuu38dMIRqG9zK15IjdRYyhoOvEhG-AjiRjlrQ&sigh=6Or8xwTb3TIpQZbydtuiroQ_6fk&begin=0&len=1714578&docid=6813529239937418232'
45		}
46];
47
48var fpConf = {
49	showPlayList: false,
50	baseURL: 'http://www.kolumbus.fi/apiirain/video',
51	bufferLength: 20,
52	loop: false,
53	videoHeight: 300,
54	hideControls: false,
55	showPlayListButtons: true,
56	progressBarColor1: 0xFF0000,
57	progressBarColor2: 0xFF0000,
58	bufferBarColor1: 0x00FF00,
59	bufferBarColor2: 0x00FF00,
60	progressBarBorderColor1: 0xAAAAAA,
61	progressBarBorderColor2: 0xAAAAAA
62}
63
64/*
65 * Event hanlders
66 */
67function clipSelected(clipIndex) {
68	flowPlayer1.ToClip(clipIndex);
69}
70
71function play() {
72	flowPlayer1.DoPlay();
73	updateIsPlaying();
74}
75
76function pause() {
77	flowPlayer1.Pause();
78	updateIsPlaying();
79}
80
81function stop() {
82	flowPlayer1.DoStop();
83	updateIsPlaying();
84}
85
86function updateIsPlaying() {
87	var field = document.getElementById("playing");
88	field.value = "Playing: " + flowPlayer1.getIsPlaying() + ", paused : " + flowPlayer1.getIsPaused();
89}
90
91function seek() {
92	var seekTimeField = document.getElementById("seekTime");
93	flowPlayer1.Seek(seekTimeField.value);
94}
95
96function getTime() {
97	var time = flowPlayer1.getTime();
98	var timeField = document.getElementById("time");
99	timeField.value = time;
100}
101
102function getDuration() {
103	var value = flowPlayer1.getDuration();
104	var field = document.getElementById("duration");
105	field.value = value;
106}
107
108function getPercentLoaded() {
109	var value = flowPlayer1.getPercentLoaded();
110	var field = document.getElementById("loaded");
111	field.value = value;
112}
113
114function replaceConfig() {
115	// replace the playlist in our configuration
116	fpConf.playList = [
117	{ name: 'Honda accord', url: 'honda_accord.flv' } ];
118	fpConf.autoBuffering = true;
119	fpConf.autoPlay = false;
120	flowPlayer1.setConfig(fpConf);
121}
122
123</script>
124</head>
125<body bgcolor="#CCCCCC">
126
127	<div id="flowplayerholder">
128		This will be replaced by the player.
129	</div>
130	<script type="text/javascript">
131		// <![CDATA[
132
133	  var fo = new SWFObject("FlowPlayer.swf", "FlowPlayer", "500", "560", "7", "#ffffff", true);
134      // need this next line for local testing, it's optional if your swf is on the same domain as your html page
135      fo.addParam("allowScriptAccess", "always");
136	  fo.addParam("flashVars", "config={configInject: true}");
137      fo.write("flowplayerholder");
138
139		// ]]>
140	</script>
141
142	<table>
143		<tr>
144			<td>Splash</td><td><a href="javascript: clipSelected(0)">Go</a></td>
145		</tr>
146		<tr>
147			<td>Stripper</td><td><a href="javascript: clipSelected(1)">Go</a></td>
148		</tr>
149		<tr>
150			<td>Honda accord</td><td><a href="javascript: clipSelected(2)">Go</a></td>
151		</tr>
152		<tr>
153			<td>Ounasvaara</td><td><a href="javascript: clipSelected(3)">Go</a></td>
154		</tr>
155		<tr>
156			<td>Milton</td><td><a href="javascript: clipSelected(4)">Go</a></td>
157		</tr>
158	</table>
159
160	<table>
161		<tr>
162			<td><a href="javascript: play()">Play</a></td>
163			<td><a href="javascript: pause()">Pause</a></td>
164			<td><input type="text" id="playing" disabled="true" size="30"></td>
165		</tr>
166		<tr>
167			<td colspan="3"><a href="javascript: stop()">Stop</a></td>
168		</tr>
169		<tr>
170			<td><input type="text" id="seekTime"></td>
171			<td colspan="2"><a href="javascript: seek()">Seek</a></td>
172		</tr>
173		<tr>
174			<td><a href="javascript: getTime()">Get time</a></td>
175			<td colspan="2"><input type="text" id="time" /></td>
176		</tr>
177		<tr>
178			<td><a href="javascript: getDuration()">Get duration</a></td>
179			<td colspan="2"><input type="text" id="duration" /></td>
180		</tr>
181		<tr>
182			<td><a href="javascript: getPercentLoaded()">Get % loaded</a></td>
183			<td colspan="2"><input type="text" id="loaded" /></td>
184		</tr>
185		<tr>
186			<td><a href="javascript: replaceConfig()">Replace playlist!</a></td>
187			<td colspan="2"><a href="javascript: setInitialConfig()">Back to original playlist!</a></td>
188		</tr>
189	</table>
190
191</body>
192</html>
193