You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

HTML controlbars with Apple look JavaScript Plugins - Demo 2 / 13

Introduction

Here we have two HTML controlbar setups whose look and feel is "borrowed" from Apple's website. This skin differ from the previous one so that there is no time display and mute button.

Example #1

Play video

HTML code

The player is wrapped with a black box. 

<!-- black box and a nested player -->
<div class="box black">
	<a class="player plain" id="player" style="height:273px;margin:0 auto"
		href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
		<img src="/img/player/btn/play.png" alt="Play video"/>
	</a>
</div>

<!-- HTML-based controlbar -->
<div id="appleControls" class="controls"></div>

JavaScript code

Here is the JavaScript code for configuring the setup 

window.onload = function() {
	$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {

		// disable default controls
		plugins: { controls: null }

	// .. and use JavaScript based controlbar plugin
	}).controls("appleControls");
};

The biggest work in the configuration is definitely CSS coding. Here is the stylesheet used in both of these examples' controlbars.

Show this second example as a standalone page

Example #2: no splash

This one is configured without splash image so the Flash component is loaded directly. Look for custom play button labels before and after the playback and slightly rounded corners on the player canvas.

Here is the JavaScript code for configuring the second setup. Look that we use jQuery's $(window).load() method to initialize second function to be triggered when this page loads. The first one is initialized in Example #1 with standard window.load construct. 

<script>
$(window).load(function() {

	// install flowplayer on with white Flash container background
	$f("flowplayer", {src: "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", bgcolor: '#ffffff'},  {

		// use first frame from the video as "splash image"
		clip: {
			url: "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv",
			autoPlay: false,
			autoBuffering: true
		},

		// custom labels on the play button
		play: {
			label: 'Aloita',
			replayLabel: 'Uudelleen'
		},

		// screen dimensions are 1 pixel less than the rounded canvas
		screen: {
			width:734,
			height:448
		},

		// rounded canvas is done with borderRadius
		canvas: {
			backgroundColor: '#112233',
			borderRadius:8
		},

		// don't use default controls
		plugins: {
			controls: null
		}

	// use HTML controls instead. place it inside element named "htmlControls"
	}).controls("htmlControls");

});
</script>

Show this second example as a standalone page