This is a message.

Emulating the Apple video player

Skin the Javascript controls plugin with an Apple-like look and feel

standalone demo

Example 1: No splash image

We use custom play button labels before and after the playback and slightly rounded corners on the player canvas.

HTML

<!-- player container -->
<div id="player" style="width:654px;height:420px;"></div>
 
<!-- controlbar container -->
<div id="controls" class="controls"></div>

HTML

Configuration

// use white background
$f("player", {
src: "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
bgcolor: '#ffffff'}, {
 
// first frame from the video works as "splash image"
clip: {
url: "http://edge.flowplayer.org/flowplayer-700.flv",
autoPlay: false,
autoBuffering: true
},
 
// custom labels on the play button
play: {
label: 'Start',
replayLabel: 'Replay'
},
 
// 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 with id "controls"
}).controls("controls");

JavaScript

Style

The biggest work here is definitely CSS coding. Here is the stylesheet used in both of these demos.

Example 2: With a splash image

This one is configured with a play button splash image and the Flash component is not loaded until it's clicked.

standalone demo

HTML

<!-- player container and a nested play button that works as a splash screen -->
<a id="player0" href="http://edge.flowplayer.org/flowplayer-700.flv">
<img src="/media/img/player/btn/play_large.png" alt="Play video" />
</a>
 
<!-- HTML-based controlbar -->
<div id="controls0" class="controls"></div>

HTML

Configuration

$f("player0", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// disable default controls
plugins: { controls: null }
 
// .. and use JavaScript based controlbar plugin
}).controls("controls0");

JavaScript