Manual quality selection · Flowplayer

270p 406p 608p

now playing:

<head/>

<style>

.flowplayer {
  background-color: #333;
}
#buttons {
  position: absolute;
  right: 2%;
  bottom: 8%;
  z-index: 10;
}
.flowplayer.is-mouseout #buttons {
  display: none;
}
#buttons span {
  padding: 1ex;
  margin: 0.5ex;
  font-weight: bold;
  background-color: #eee;
  cursor: pointer;
  -webkit-border-radius: 1ex;
  -moz-border-radius: 1ex;
  border-radius: 1ex;
}
#buttons span.active {
  color: #00a7c8;
  background-color: #666;
  cursor: default;
}

<script>

flowplayer.conf = {
   cuepoints: [0.3]
};

$(function () {
  var api = flowplayer(),
      resolutions = {
        "270p": 800,
        "406p": 1200,
        "608p": 1600
      },
      seekable = !/iPad/.test(navigator.userAgent), // and possibly others
      pos = 0;

  function resumepos(e, api) {
    if (pos && (seekable && e.type === "ready" || !seekable && e.type === "cuepoint")) {
      api.seek(pos);
      pos = 0;
    }
  }

  api.bind("load", function (e, api, video) {
    $("#clip").text(video.src);
  }).bind("cuepoint", function (e, api) {
    // iPad cannot seek in load callback
    resemepos(e, api);
  });

  $("#buttons span").click(function () {
    var button = $(this),
        base = "bbb-" + resolutions[button.text()];

    if (!button.hasClass("active")) {
      // store current position
      pos = api.video.time;

      api.load([
        {mp4: "http://stream.flowplayer.org/" + base + ".mp4"},
        {flash: "mp4:" + base}
      ], function (e, api) {
        resumepos(e, api);
      });

      $("#buttons span").removeClass("active");
      button.addClass("active");
    }
  });
});

<body/>

<div class="flowplayer is-splash" data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st">
   <video>
      <source type="video/mp4" src="http://stream.flowplayer.org/bbb-800.mp4" />
      <source type="video/flash" src="mp4:bbb-800" />
   </video>

   <div id="buttons">
      <span class="active">270p</span> <span>406p</span> <span>608p</span>
   </div>
</div>