Flowplayer · Playlist with varying aspect ratio

prev next

Video aspect ratio:

Engine:

<head/>

<script>

window.onload = function () {
var spans = document.getElementsByTagName("span"),
results = [], i;
 
// collect info elements
for (i = 0; i < spans.length; i += 1) {
if (spans[i].className === "result") {
results.push(spans[i]);
}
}
 
flowplayer("#player", {
engine: "flash",
ratio: 9/16,
splash: true,
playlist: [{
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
sources: [
{ type: "video/flash", src: "mp4:night1" },
{ type: "video/mp4", src: "//edge.flowplayer.org/night1.mp4" }
]
}, {
rtmp: "rtmp://stream.blacktrash.org/cfx/st",
sources: [
{ type: "video/flash", src: "mp4:fp/test/portrait" },
{ type: "video/mp4", src: "//d12zt1n3pd4xhr.cloudfront.net/fp/test/portrait.mp4" }
]
}, {
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
sources: [
{ type: "video/flash", src: "mp4:functional" },
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" }
]
}, {
rtmp: "rtmp://suiq9cjky46zg.cloudfront.net/cfx/st",
sources: [
{ type: "video/flash", src: "mp4:ccc_trailer1" },
{ type: "video/mp4", src: "//d12zt1n3pd4xhr.cloudfront.net/ccc_trailer1.mp4" }
]
}]
 
}).on("ready", function (e, api, video) {
results[0].innerHTML = "" + (video.width / video.height);
results[1].innerHTML = api.engine.engineName;
});
 
};

JavaScript

Since version 6.0.2 Flowplayer does not need any additional options for Flash video if the container ratio does not match video aspect ratio.

<body/>

<div id="player">
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
</div>
 
<!-- show info for demo purposes -->
<div class="info">
<p>Video aspect ratio: <span class="result"></span></p>
 
<p>Engine: <span class="result"></span></p>
</div>

HTML