Flowplayer · Inspection of the video object

Video object in the "load" event

no video loaded

Video object in the load() callback

load() not called

We display the complete video object on the page. Note how the result varies depending on what properties are available at the moment when the object is accessed either in the load event or in the load() callback.

Usually one would access only selected properties of the object for scripting or the complete object for debugging in the browser console like in this demo.

<head/>

<style>

.flowplayer {
background-image: url(//flowplayer.org/media/img/demos/functional.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
background-image: url(//flowplayer.org/media/img/demos/functional@x2.jpg);
}
}
 
#loadevent, #loadcallback {
min-height: 30ex;
background-color: #efefef;
padding: 1ex;
}
ul {
list-style: none;
}

CSS

<script>

$(function () {
 
function objinspect(obj, el) {
// prints object obj in an unnumbered list into element el
// descending recursively into nested objects
 
var ul = $("<ul/>");
 
$.each(obj, function (key, val) {
if (typeof val == "object") {
var nestedul = $("<ul/>");
 
ul.append("<li>" + key + ":");
objinspect(val, nestedul);
ul.append(nestedul).append("</li>");
 
} else {
ul.append("<li>" + key + ": " + val + "</li>");
}
});
 
$(el).html(ul);
}
 
// grab the first flowplayer api
var api = flowplayer(0);
 
// show the video object as of in the "load" event
api.on("load", function (e, api, video) {
objinspect(video, "#loadevent");
});
 
// click on button toggles between 2 videos
$("button").click(function () {
var base = "//edge.flowplayer.org/",
fn = (/bauhaus/.test(api.video.url) ? "functional" : "bauhaus");
 
api.load([
{ webm: base + fn + ".webm" },
{ mp4: base + fn + ".mp4" },
{ flash: "mp4:" + fn }
 
], function (e, api, video) {
// show the video object as of in the load() callback
objinspect(video, "#loadcallback");
});
});
});

JavaScript

<body/>

<div data-ratio="0.4167"
data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
class="flowplayer is-splash">
<video>
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">
<source type="video/flash" src="mp4:functional">
</video>
</div>
 
<p class="info"><button>toggle video</button></p>
 
<h2>Video object in the "load" event</h2>
 
<div id="loadevent">
no video loaded
</div>
 
<h2>Video object in the load() callback</h2>
 
<div id="loadcallback">
load() not called
</div>

HTML