| Demos | Qsel

Qsel

Qsel demo source

Copy the code below to obtain your own standalone demo.


<!doctype html>

<html>

<head>
   <meta charset="utf-8">

   <title>Drive quality selection · Standalone demo · Flowplayer</title>

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

   <!-- The Flowplayer skin -->
   <link rel="stylesheet" href="https://releases.flowplayer.org/7.2.4/skin/skin.css">

   <!-- 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>

   
   
   <!-- Flowplayer-->
   <script src="https://releases.flowplayer.org/7.2.4/flowplayer.min.js"></script>

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


<script src="https://releases.flowplayer.org/drive-analytics/flowplayer.drive-analytics.min.js"></script>
<!-- quality selector assets -->
<script src="https://releases.flowplayer.org/vod-quality-selector/flowplayer.vod-quality-selector.min.js"></script>

</head>

<body>
<div id="content">

<div id="drive-qsel"></div>

<script>
flowplayer("#drive-qsel", {
    clip: {
        title: "Flowplayer VOD Quality Selector",

        // VOD quality selector plugin configuration
        qualities: ["160p", "260p", "530p", "800p"],
        defaultQuality: "260p",

        sources: [
            // HLS for automatic quality selection
            { type: "application/x-mpegurl",
              src:  "//cdn.flowplayer.org/202777/84049-bauhaus.m3u8" },

            /* manual selection */

            // default VOD resolution in 2 formats
            { type: "video/webm",
              src:  "//cdn.flowplayer.org/202777/84049-bauhaus.webm" },
            { type: "video/mp4",
              src:  "//cdn.flowplayer.org/202777/84049-bauhaus.mp4" },

            // default VOD resolution via RTMP for Flash in old browsers
            { type: "video/flash",
              src:  "mp4:202777/84049-bauhaus.mp4" }
        ]
    },
    rtmp: "rtmp://rtmp.flowplayer.org/cfx/st/",
    splash: "//drive.cdn.flowplayer.org/202777/84049-snap.jpg",
    ratio: 5/12,

    // twitter share url points to page with twitter card
    // and twitter player with quality selector
    twitter: "https://flowplayer.org/demos/qsel/",
    // facebook share url points to page with opengraph tags
    // to share HLS stream
    facebook: "https://flowplayer.org/demos/qsel/",
    embed: {
        // embed including quality selector
        iframe: "//flowplayer.org/standalone/multires/drive-iframe.html"
    }
});
</script>

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

</html>