Electroteque Media

Controlbar Video Previewer Thumbnails

Video previewer using seperate thumbnails

This example demonstrates using individual video thumbnails instead of flat contactsheets where generating them is not possible. Loading times may vary.

    
  <div class="flex flex-col w-full">
          <div id="thumbnails" class=""></div>

  </div>

  <script type="text/javascript">

  	var player = flowplayer("#thumbnails", {
    "controlspreview": {
        "thumbnails": true
    },
    "framesurl": "../../images/thumbnails/bbb/big_buck_bunny_400k-[index].jpeg",
    "src": [
        {
            "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
            "type": "video/webm"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
            "type": "video/mp4"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.ogv",
            "type": "video/ogg"
        }
    ],
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw"
});

  </script>