Flowplayer · Custom loading animation

A custom loading indicator using an animated GIF image.

We use a long video to extend the loading time.

<head/>

<style>

.flowplayer {
background: #777;
}
 
/* waiting element of fixed size to accomodate custom graphic */
.flowplayer .fp-waiting {
width: 128px;
height: 26px;
background-image: url(/media/img/loading.gif);
}
/* hide default loading animation or text */
.flowplayer .fp-waiting em, .flowplayer .fp-waiting p {
display: none;
}

CSS

<script>

window.onload = function () {
 
flowplayer("#player", {
splash: true,
ratio: 3/7,
clip: {
rtmp: "rtmp://r.demo.flowplayer.netdna-cdn.com/play",
title: "Buffalo Soldiers",
sources: [
{ type: "video/mp4",
src: "http://p.demo.flowplayer.netdna-cdn.com/vod/demo.flowplayer/buffalo_soldiers.mp4" },
{ type: "video/flash",
src: "mp4:vod/demo.flowplayer/buffalo_soldiers.mp4" }
]
}
});
 
};

JavaScript

<body/>

<div id="player"></div>

HTML