Context Navigation

source: branches/fl5_instream/js/test/examples/instream.html @ 2043

Visit:

Revision 2043, 13.9 KB checked in by pablo, 18 months ago (diff)
Adds preliminary support for the instream api in HTML5

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2	<html>
3	<head>
4	<title>Instream API Example</title>
5	<script type="text/javascript" src="../../bin-debug/jwplayer.js">
6	</script>
7	<script type="text/javascript" src="settings.js">
8	</script>
9	<style type="text/css">
10	form {
11	margin-bottom: 15px;
12	overflow: hidden;
13	}
14	formset {
15	display:block;
16	float:left;
17	margin-right: 15px
18	}
19	</style>
20	</head>
21	<body>
22	<script type="text/javascript">
23	document.write("<h1>" + document.title + "</h1>");
24	</script>
25
26	<form>
27	<formset>
28	<h3>Player Options</h3>
29	<label>Rendering mode</label>
30	<select id="mode">
31	<option id="mode_flashonly" value="flashonly" selected="selected">Flash Only</option>
32	<option id="mode_html5only" value="html5only">HTML5 Only</option>
33	</select><br/>
34	<label>Instream Timing</label>
35	<select id="timing" onchange="return setupAll();">
36	<option id="timing_beforeplay" value="beforeplay" selected="selected">onBeforePlay</option>
37	<option id="timing_button" value="button">Button click</option>
38	<option id="timing_time" value="time">At 5 seconds</option>
39	<option id="timing_complete" value="complete">onComplete</option>
40	</select><br/>
41	<label>Controlbar Position</label>
42	<select id="controlbar" onchange="return setupAll();">
43	<option id="controlbar_over" value="over" selected="selected">Over</option>
44	<option id="controlbar_bottom" value="bottom">Bottom</option>
45	<option id="controlbar_top" value="top">Top</option>
46	</select><br/>
47	<label>Playlist Position</label>
48	<select id="playlist" onchange="return setupAll();">
49	<option id="playlist_none" value="none" selected="selected">None</option>
50	<option id="playlist_right" value="right">Right</option>
51	</select><br/>
52	<label>Repeat</label>
53	<select id="repeat" onchange="return setupAll();">
54	<option id="repeat_none" value="none" selected="selected">None</option>
55	<option id="repeat_list" value="list">List</option>
56	<option id="repeat_always" value="always">Always</option>
57	<option id="repeat_single" value="single">Single</option>
58	</select><br/>
59	<label>Skin</label>
60	<select id="skin" onchange="return setupAll();">
61	<option id="skin_" value="" selected="selected">None</option>
62	<option id="skin_beelden" value="beelden">Beelden</option>
63	<option id="skin_classic" value="classic">Classic</option>
64	</select><br/>
65	<label>Stretching</label>
66	<select id="stretching" onchange="return setupAll();">
67	<option id="stretching_uniform" value="uniform" selected="selected">Uniform</option>
68	<option id="stretching_exactfit" value="exactfit">Exactfit</option>
69	<option id="stretching_fill" value="fill">Fill</option>
70	<option id="stretching_none" value="none">None</option>
71	</select>
72	</formset>
73	<formset>
74	<h3>InStream Options</h3>
75	<label>Controlbar Seekable</label>
76	<select id="seekable" onchange="return setupAll();">
77	<option id="seekable_always" value="always" selected="selected">Always</option>
78	<option id="seekable_never" value="never">Never</option>
79	<option id="seekable_backwards" value="backwards">Backwards</option>
80	</select><br/>
81	<label>Controlbar Pausable</label>
82	<select id="pausable" onchange="return setupAll();">
83	<option id="pausable_true" value="true" selected="selected">True</option>
84	<option id="pausable_false" value="false">False</option>
85	</select><br/>
86	<label>Controlbar Stoppable</label>
87	<select id="stoppable" onchange="return setupAll();">
88	<option id="stoppable_true" value="true" selected="selected">True</option>
89	<option id="stoppable_false" value="false">False</option>
90	</select><br/>
91	<label>Playlist Clickable</label>
92	<select id="playlist_clickable" onchange="return setupAll();">
93	<option id="playlist_clickable_true" value="true" selected="selected">True</option>
94	<option id="playlist_clickable_false" value="false">False</option>
95	</select><br/>
96	<label>Autoload</label>
97	<select id="autoload" onchange="return setupAll();">
98	<option id="autoload_false" value="false" selected="selected">False</option>
99	<option id="autoload_true" value="true">True</option>
100	</select><br/>
101	</formset>
102	<formset>
103	<h3>Log Events</h3>
104	<label>Action</label>
105	<select id="log">
106	<option id="log_console" value="console" selected="selected">console.log</option>
107	<option id="log_alert" value="alert">alert</option>
108	</select><br/>
109	<label>Event</label>
110	<select id="events" multiple="multiple" size="10">
111	<option value="onPlay">onPlay</option>
112	<option value="onPause">onPause</option>
113	<option value="onBuffer">onBuffer</option>
114	<option value="onIdle">onIdle</option>
115	<option value="onComplete">onComplete</option>
116	<option value="onTime">onTime</option>
117	<option value="onSeek">onSeek</option>
118	<option value="onMeta">onMeta</option>
119	<option value="onMute">onMute</option>
120	<option value="onVolume">onVolume</option>
121	<option value="onFullscreen">onFullscreen</option>
122	<option value="onError">onError</option>
123	<option value="onInstreamClick">onInstreamClick</option>
124	<option value="onInstreamDestroyed">onInstreamDestroyed</option>
125	</select>
126	</formset>
127
128	<button id="go" onclick="return setupAll();" style="float:left; clear:left">Update</button>
129	</form>
130	</p>
131
132
133	<hr/>
134
135	<div style="width:100%; height:300px; overflow:auto">
136	<div style="float:left;">
137	<div height="270" id="player" width="480">
138	Player should replace this
139	</div>
140	</div>
141	<div style="float:left; margin-left: 15px;">
142	<button id="instreamInit" onclick="initInstream();return false;" style="display:none">Click to initialize Instream</button>
143	<div id="instreamActions">
144	<label>Instream Controls</label>
145	<button id="play" onclick="playInstream();return false;">Play</button>
146	<button id="pause" onclick="pauseInstream();return false;">Pause</button>
147	<button id="seek" onclick="seekInstream(10);return false;">seek(10)</button>
148	<button id="getters" onclick="updateGetters();return false;">Update Getters</button>
149	<button id="destroy" onclick="destroyInstream();return false">Destroy</button>
150	<br/>
151	<label>State:</label><span id="state">IDLE</span><br/>
152	<label>Position:</label><span id="position">0.0</span><br/>
153	<label>Duration:</label><span id="duration">0.0</span>
154	</div>
155	</div>
156	</div>
157	<script type="text/javascript">
158	var player = null;
159	var instream = null;
160	var instreamOptions = {};
161
162	function setupAll() {
163	var mode = document.getElementById('mode').value;
164	var timing = document.getElementById('timing').value;
165	var skin = document.getElementById('skin').value;
166	var stretching = document.getElementById('stretching').value;
167	var controlbar = document.getElementById('controlbar').value;
168	var playlist = document.getElementById('playlist').value;
169	var repeat = document.getElementById('repeat').value;
170
171	instreamOptions = {
172	controlbarseekable: document.getElementById('seekable').value,
173	controlbarpausable: document.getElementById('pausable').value,
174	controlbarstoppable: document.getElementById('stoppable').value,
175	playlistclickable: document.getElementById('playlist_clickable').value,
176	autoload: document.getElementById('autoload').value
177	};
178
179	var events = {};
180	var timingHit = false;
181	var played = false;
182
183	document.getElementById("instreamInit").style.display = (timing == "button" ? "block" : "none");
184
185	switch (timing) {
186	case "beforeplay":
187	events = {
188	onPlaylistItem: function(evt) {
189	played = false;
190	},
191	onBeforePlay: function(evt) {
192	if (!played) {
193	played = true;
194	initInstream();
195	}
196	}
197	}
198	break;
199	case "time":
200	events = {
201	onTime: function(evt) {
202	if (!timingHit && evt.position >= 5) {
203	timingHit = true;
204	initInstream();
205	}
206	}
207	}
208	break;
209	case "complete":
210	events = {
211	onComplete: function(evt) {
212	initInstream();
213	}
214	}
215	break;
216	}
217
218	var setupBlock = {
219	players: settings.modes[mode],
220	playlist: [
221	{ image: "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
222	title: "Big Buck Bunny trailer",
223	levels: [{file: "http://content.bitsontherun.com/videos/nPripu9l-DaVyfMJc.mp4"},{file:"http://content.bitsontherun.com/videos/nPripu9l-1Lq5Mnwq.webm"}]
224	},
225	{ title: "Elephants dream trailer",
226	image: "http://content.bitsontherun.com/thumbs/6O7cYVpH-480.jpg",
227	levels: [{file: "http://content.bitsontherun.com/videos/6O7cYVpH-1ahmry41.mp4"},{file:"http://content.bitsontherun.com/videos/6O7cYVpH-1Lq5Mnwq.webm"}] }
228	],
229	events: events,
230	controlbar: controlbar,
231	'playlist.position': playlist,
232	'playlist.size': 200,
233	stretching: stretching,
234	width: playlist == "none" ? 480 : 680,
235	repeat: repeat,
236	plugins: {
237	// 'hd-2': { file: '/testing/files/oorlogswinter.mp4' }
238	}
239	};
240	if (skin) {
241	setupBlock.skin = "../../../../../tags/skins/" + skin + "/" + skin + ".zip";
242	}
243
244	player = jwplayer("player").setup(setupBlock);
245	return false;
246	}
247
248	function initInstream() {
249	instream = player.loadInstream({
250	levels:[
251	{file:"http://content.bitsontherun.com/videos/yYul4DRz-1ahmry41.mp4"},
252	{file:"http://content.bitsontherun.com/videos/yYul4DRz-1Lq5Mnwq.webm"}
253	],
254	duration: 5
255	}, instreamOptions);
256
257	instream.onInstreamDestroyed(function(evt) {
258	document.getElementById("instreamInit").style.display = "block";
259	});
260
261	if (instream) {
262	document.getElementById("instreamInit").style.display = "none";
263	setupEvents();
264	} else {
265	alert("Instream Player not present");
266	}
267	}
268
269	function playInstream() {
270	if(instream) {
271	console.log("Calling instream.play(true);");
272	instream.play(true);
273	}
274	}
275
276	function pauseInstream() {
277	if(instream) {
278	console.log("Calling instream.pause(true);");
279	instream.pause(true);
280	}
281	}
282
283	function seekInstream(pos) {
284	if(instream) {
285	console.log("Calling instream.seek("+pos+");");
286	instream.seek(pos);
287	}
288	}
289
290	function updateGetters() {
291	if (instream) {
292	document.getElementById("state").innerHTML = instream.getState();
293	document.getElementById("position").innerHTML = instream.getPosition();
294	document.getElementById("duration").innerHTML = instream.getDuration();
295	}
296	}
297
298	function destroyInstream() {
299	if(instream) {
300	console.log("Calling instream.destroy();");
301	instream.destroy();
302	}
303	}
304
305
306	function setupEvents() {
307	if (!instream) return;
308
309	var allOptions = document.getElementById("events").options;
310	for (var i=0; i < allOptions.length; i++) {
311	var option = allOptions[i];
312	if (option.selected) {
313	var eventHandler = instream[option.value];
314	if (typeof eventHandler == "function") {
315	eventHandler(function(evt) {
316	if (document.getElementById("log").value == "console") {
317	console.log("Event generated: " + evt.type);
318	console.log(evt);
319	} else {
320	alert("Event generated: " + evt.type);
321	}
322	});
323	}
324	}
325	}
326	}
327
328	function setDefault(name) {
329	var regex = new RegExp(name+"=(\\w+)");
330	var val = window.location.href.match(regex);
331	if (val && val.length==2) {
332	document.getElementById(name+"_"+val[1]).selected = true;
333	}
334	}
335
336	setDefault("timing");
337	setDefault("mode");
338	setDefault("skin");
339	setDefault("stretching");
340	setDefault("controlbar");
341	setDefault("playlist");
342	setDefault("repeat");
343
344	setDefault("seekable");
345	setDefault("pausable");
346	setDefault("stoppable");
347	setDefault("playlist_clickable");
348	setDefault("autoload");
349
350	setupAll();
351	</script>
352
353	<h3>HTML code</h3>
354	</body>
355	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: