Emulating the Apple video player
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>
Configuration
// use white background
$f("player", {
src: "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",
bgcolor: '#ffffff'}, {
// first frame from the video works 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: '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");
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.
HTML
<!-- player container and a nested play button that works as a splash screen -->
<a id="player0" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/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>
Configuration
$f("player0", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
// disable default controls
plugins: { controls: null }
// .. and use JavaScript based controlbar plugin
}).controls("controls0");