# 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.


```html
<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


```js
<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](https://try.flowplayer.com/?channel=stable#0=N4IgZglgNgpgziAXAbVAOwIYFsZJABwCcYA3CGAdxABoQBjAezQBcYW8QBfa9bXREADoAVglqMWbZnglxmAAiKlyFOPIC885AB008+cF379cQnUTztIABbNm+RAHpHUAMxkAJjAaCoFOh5ogoxYjkpklI4ADDAeHgBsdACcGAC08QBMYPGpACy5GACMqUmuABwZqa7xZbkArBhRTa5guY4Y+KkZAOzddIUZSd15GPGueTBldCUARklRqVEeUYUw8fO5GTN1APrVUYIUMDP4VtRGxswAnvgwFlYQWBgA5jCORydnF-oej2xwECYcAshj0xn0FAgHmY1gs8VyUXOYPB1hgEGetgs+yR4O4FzxYNB4NM5ksNjsDmcbk83l8-kCwQYoXCKmisQSyTSmWyeQKxVKFSqNXqjWarXanR6fQGQxGYwmU1m80Wy1W6yim22Ox6Bw+pxo33k11u9xAjxebz1X2R8l+ODQAKBIMNEKhMIsuTKiJd8lR6Mx8h1OOMBP0oYMhpJpts9icLncUNpfgCQRCYWIEQobLiiRS6SyOXyRRK5Uq1VqDSaURabQ6XV6-UGwwK8tyk2mSTmCyWKzWGy2u26GV1x31wf0xruZPNr3eo+t4Lt-0BDudNtd0Nh8gGXvHxj9GOYFiH3pt4YJAF1dLowFAGBR8FAMFcYIQABRWADEj+fr7OEbBKMyWcFNBFve8fxfQhGVCDBXCiGYEhmaYwCSMoZjybpkNSDAZjAOoSm6MZXA8XIwAwGBGkcawoDgRwvBaRIMGGDIPBmcZchqJJUjKQp4m7fDugKOokiSeIMA8MInyuKAIDkQQsFcABXMoF0UBg5FfU0QIZcCH2k18YPaeDEPibDUPQzDsNw-DCOI0jyMoqJHAgRwSFSCBUgY7I6GYro2I4rieL4gS6iEjARLEiTUkKER8GeNSWUoNdwWYQh0VeQgLD0yDDKSihBDSjLDIAWQAeQAVQAZQAUTKgA1GqACU9yA-K4HxXROAASi4HgQEwHA8GCOAxHoJhWHYAQ+t4IaBEEWwsCgGhxskKaQAAHl+Eh5ChdQrFywgrAAPg2+iIBIY6uAvWhZLQABrBAUFASc8DkGTcFoQb+HAO99N-aC6FGlalMIZaBBjfBgR0oIcoMwGmUcYhYAwOB4EcTBmAut5XEcORcNgPHrkJuGAZGsbrChLw0CQNKlJgWhYggZgCf4cjaJgbgXpuH64DodL8GkL6+DwUmoJBsG8Eh6HHFAsXDLTZHKLRujMexxxcfxmZCa8cilKgZhHHl6CsAgIJRBWym4jYWnCHpxnfhZ7W2YwDmuZAV6BD5gWhYGkWIdoiXwfJewZblv7DqMpXUfRtWSBxonWakpTnjNuiaLgBSzZECmqZtxA6YZkAmad2AkHZtH3c9kBvYgQWVu+vB8qDqWKTD3SI-hqOYBRlWMYwLH441xPneT1OHXTZRKCz83c+tmmC7touS9Z8vXcrm76GsDA0DQHuZB3jBCCuFanmEBhCHq19HQXkBXBWx8U7TgAFHf98QCui46W4j53uheauJpLAK0YQwDmiAJ4rB0qu1SPgV2bB-S+zRrAOgrAPDDQtpwIAA)