Flowplayer · Load method

Check the docs for more info about the video object.

<head/>

<style>

.flowplayer {
background-color: #333;
}

CSS

<script>

As we are demonstrating the load() method with a string-type argument too, the sources must obey a consistent naming scheme, and for instance we cannot use the RTMP protocol for the Flash engine. Always specifying a full clip object is a good habit.

flowplayer(function (api) {
 
api.on("load ready", function (e, api, video) {
var log = $("<p/>").text(e.type + ": " + video.src + ", duration: " +
(video.duration || "not available"));
 
$("#log").append(log);
});
 
});
 
$(function () {
// load clip object
$("button:first").click(function () {
flowplayer(0).load({
sources: [
{ type: "video/webm", src: "//edge.flowplayer.org/functional.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" }
]
});
});
 
// string argument to load()
$("button:last").click(function() {
flowplayer(0).load("//edge.flowplayer.org/playful.mp4");
});
 
});

JavaScript

<body/>

<div data-ratio="0.4167" class="flowplayer">
<video>
<source type="video/webm" src="//edge.flowplayer.org/bauhaus.webm">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
</video>
</div>
 
<p class="info"><button>load(clip object)</button> <button>load(string)</button></p>
 
<div id="log"></div>

HTML