flowplayer6 html5 bitrate select

Wowza Streaming Engine
1

Hi

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

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

thanks

2

Hello,

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

http://flash.flowplayer.org/demos/plugins/streaming/brselect.html

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:

https://www.wowza.com/docs/how-to-use-flowplayer-with-wowza-media-server-software

Jason Hatchett

3

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

4

Hello,

Can you provide your player code for review?

5 
<!doctype html>

<html>

<head>
   <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="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.css">
 
   <!-- 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;
   }
   
</style>

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

   <!-- recommended: the hlsjs engine plugin -->
   <script src="https://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
   <!-- recommended: quality selector  plugin -->
   <script src="//releases.flowplayer.org/vod-quality-selector/flowplayer.vod-quality-selector.js"></script>

</head>

<body>
<div id="content">

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

<script>
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
});
</script>

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

</html>

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.