Wowza Community

flowplayer6 html5 bitrate select


Does somebody have working example how to setup flowplayer for bitrate select menu ?

I tried follow demo on flowplayer site but with no luck.



Is this the FlowPlayer article for implementing User driven bit-rate switching that you were trying to follow:

If so can you clarify where you ran into issues, and also provide a link to your player for us to review, or post the code in your response?

Our article, is also worth reviewing for your player implementation:

Jason Hatchett

Thanks for reply but this is for flash player and I am using html5 player.


Can you provide your player code for review?

<!doctype html>


   <meta charset="utf-8">

   <title>bitrate select demo</title>

   <!-- optimize mobile versions -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- The Flowplayer skin -->
   <!-- The "functional" skin, "functional.css", "minimalist.css" and "playful.css" are available -->
   <link rel="stylesheet" href="skin/functional.css"> 
   <!-- the quality selector stylesheet -->
   <link rel="stylesheet" href="//">
   <!-- CSS for this demo -->
   <!-- Flowplayer-->

   <!-- Minimal styling for this standalone page (can be removed) -->
   <style>body {
      font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
      font-size: 14px;
      margin: 0;
      padding: 0;
   #content {
      margin: 50px auto;
      max-width: 982px;

   <!-- CSS for this demo -->
   <!-- Flowplayer-->
   <script src="flowplayer.min.js"></script>

   <!-- recommended: the hlsjs engine plugin -->
   <script src=""></script>
   <!-- recommended: quality selector  plugin -->
   <script src="//"></script>


<div id="content">

<div id="fp-hlsjs">
     <a class="fp-prev"></a>
     <a class="fp-next"></a>

flowplayer("#fp-hlsjs", {
    live: true,
    ratio: 9/16,
    autoplay: true,
    hlsQualities: true,
    clip: {
        sources: [
            { type: "application/x-mpegurl",
             src: "//wowza-server/app_name/smil:smil_file.smil/playlist.m3u8",
             hlsQualities: true }       
    embed: false

</div><!--/end content -->


If somebody’s interested here’s working demo with flowplayer 6 (html5 version) with hlsjs plugin. You have to create smil file with qualities and that’s all.