HTML controlbar for iPad JavaScript Plugins - Demo 3 / 13
Introduction
This is the Apple-style controlbar with iPad support enabled. This demo has device simulation enabled so it displays the HTML5 video player on all browsers that support the HTML5 video tag. But check this page on your iPad to see how it really works!
HTML code
The video container refers to the video file as ususal. Note that for iPads the video should be in a format supported by Apple QuickTime.
<!-- black box and a nested player -->
<div class="box black">
<a class="player plain" id="player"
href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4">
<h3>Note: HTML5 video tag is being used on all browsers</h3>
<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 that enables the iPad plugin.
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
// and the iPad plugin so that this also works on the iPad
}).controls("appleControls").ipad({ simulateiDevice: true, controls: false });
};
Show this second example as a standalone page