| Demos | Playlist


Playlist demo source

Copy the code below to obtain your own standalone demo.

<!doctype html>


   <meta charset="utf-8">

   <title>Classic playlist · 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.6/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;

   <!-- CSS for this demo -->
   <link rel="stylesheet" href="/media/css/demos/playlist/classic.css">
      <!-- Flowplayer depends on jquery for video tag based setups -->
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <!-- Flowplayer-->
   <script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>

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

// wait until DOM is ready
$(function () {

    // manual installation into container element with id="classic"
        customPlaylist: true,
        splash: true,
        ratio: 9/16,
        hlsQualities: [-1, 1, 3, 6, 7]



<div id="content">

<div id="classic" class="is-closeable">

      <source type="application/x-mpegurl"
      <source type="video/mp4"

   <div class="fp-playlist">
      <a href="https://edge.flowplayer.org/night3.mp4" id="thumb1"></a>
      <a href="https://edge.flowplayer.org/night5.mp4" id="thumb2"></a>
      <a href="https://edge.flowplayer.org/night6.mp4" id="thumb3"></a>
      <a href="https://edge.flowplayer.org/night1.mp4" id="thumb4"></a>


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