Animated previews

Adds an animated image showing a preview snippet of the VOD content.

Table of contents

Prerequisites

If you are not a Flowplayer platform customer, you need to 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>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

To enable the plugin in the OVP managed async player, declare it in the "plugins": [] config object with preview.

Configuration

If you are using a video form Flowplayer platform that has animated previews generated you don't need to configure anything additional. The player will request the preview information alongside other metadata from the platform API.

For manually created previews you need to configure the player to pick up the previews.

You configure the plugin with top level configuration option preview.

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

The configuration option is a configuration object with properties:

  • trigger - what to use to trigger playback of the animation. Values are bitmasks taken from the 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 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 properties (description below).
  • type - MIME type of the file. Only image/* supported for now.

  • dimensions - optional dimensions of the preview. Object with keys width and height that represent numbers of pixels. Usefull if you configure src as an array to support responsive previews.

    An example configuration overriding the default trigger would be:

    preview: {
src: "<url of image>",
type: "image/webp",
trigger: flowplayer.preview.trigger.VIEWPORT_VISIBLE
}

Example code and demo

 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: { trigger: flowplayer.preview.trigger.MOUSEOVER, src: previews } })
Playlist Quality selection
Results