Flowplayer · Load event

Observe the timing of global and local events.

Note how load can be listened to locally with a splash setup only.

<head/>

<style>

.flowplayer {
margin: 5px 0;
}
.flowplayer.jquery {
background-color: #ffe9f5;
}
.flowplayer.js {
background-color: #e0ffcc;
}

CSS

<script>

var fpEvents = "load ready",
 
fpLog = function (container, scope, type, video) {
var id = Number(container.data("flowplayer-instance-id")),
bg = container.hasClass("js") ? "#e0ffcc" : "#ffe9f5",
msg = "ID " + id + " " + scope + " on " + type + " - " +
(video && video.src || "video object not available");
 
$("#log").append($("<p/>").css({backgroundColor: bg}).text(msg));
};
 

// global api setup
flowplayer(function (api, root) {
fpLog($(root), "GLOBAL init", "undefined")
 
api.on(fpEvents, function (e, api, video) {
var vid = video || api.video;
 
fpLog($(root), "GLOBAL event", e.type, vid);
});
});
 

$(function () {
var jqueryContainer = $(".player:first"),
jsContainer = $(".player:last");
 
jqueryContainer.flowplayer({
ratio: 5/12
});
 
// api retrieval cannot be chained to installation
flowplayer(jqueryContainer).on(fpEvents, function (e, api, video) {
var vid = video || api.video;
 
fpLog(jqueryContainer, "LOCAL event", e.type, vid);
});
 

flowplayer(jsContainer[0], {
ratio: 5/12,
splash: true,
clip: {
title: "JavaScript install, splash setup",
sources: [
{ type: "video/webm", src: "//edge.flowplayer.org/functional.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" }
]
}
 
}).on(fpEvents, function (e, api, video) {
var vid = video || api.video;
 
fpLog(jsContainer, "LOCAL event", e.type, vid);
});
 
});

JavaScript

<body/>

<div class="player jquery is-closeable">
<video data-title="jQuery manual install, poster setup">
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
</video>
</div>
 
<div class="player js is-closeable"></div>
 
<div id="log"></div>

HTML