Skip to content
Wowza Flowplayer
/
/
Animated Previews
Last updated

Animated Previews plugin

The Animated Previews plugin adds an animated image showing a preview snippet of the VOD content.

Prerequisites

Generate a compatible animation from your video to work with the plugin. Currently supported formats:

  • image/gif
  • image/webp

Installation

Load the animated previews plugin next to the core player.

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/preview.min.js"></script>

Configuration

Configure the player to pick up the previews. Configure the plugin with the top level configuration option preview.

Info

To support animated previews, the player also needs to be configured with a poster image configuration. Otherwise, the preview plugin will not be activate.

The configuration option is a configuration object with the following properties:

  • trigger - what to use to trigger playback of the animation. Values are taken from flowplayer.preview.trigger enumeration. Possible keys:
    • MOUSEOVER - When the mouse is hovering the player. This is the default for desktop browsers.
    • VIEWPORT_VISIBLE - When the player is in or enters the viewport.
    • MOBILE_VIEWPORT_VISIBLE - When the player is in or enters the viewport on mobile devices. This is the default for mobile browsers.
    • src - URL of the animated file to use for the preview. When configuring multiple previews, this is an array of objects with src, type, and dimension (description below) properties.
    • type - MIME type of the file. Only image/* is supported.
    • dimensions - optional dimensions of the preview. Object with keys width and height that represent the number of pixels. Useful if you configure src as an array to support responsive previews.

Example code

<flowplayer-demo plugins="hls,preview">
  <code class="language-html">
  <div id="player"></div>
  </code>
  <code class="language-javascript">
  const previews = [
  {
    src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_360.webp",
    type: "image/webp",
    dimensions: {
      width: 640,
      height: 360,
    },
  },
  {
    src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_270.webp",
    type: "image/webp",
    dimensions: {
      width: 480,
      height: 270,
    },
  },
  {
    src: "http://l3video.lwcdn.com/preview/0edd6c9a-62f6-44a1-9382-36845a0003f4/ap-277c1297-4a63-4e8c-9b90-0d01e69042b5_720.webp",
    type: "image/webp",
    dimensions: {
      width: 1280,
      height: 720,
    },
  },
]

flowplayer("#player", {
  src: "//cdn.flowplayer.com/a30bd6bc-f98b-47bc-abf5-97633d4faea0/hls/de3f6ca7-2db3-4689-8160-0f574a5996ad/playlist.m3u8",
  poster: "//cdn.flowplayer.com/a30bd6bc-f98b-47bc-abf5-97633d4faea0/i/v-i-de3f6ca7-2db3-4689-8160-0f574a5996ad-1.jpg",
  preview: {
    src: previews
  }
})
</code>
</flowplayer-demo>

Example code and demo

Example code and demo

Previous page
Next page