# Endscreen plugin

The Endscreen plugin adds support to display a selection of recommended videos at the end of a video or playlist. The end screen can show these recommendations if they're available in a grid layout. By default, the first video in the recommendation list plays after a few seconds.

To see the Endscreen plugin in action, you can view this demo in our Wowza Flowplayer Sandbox. The demo doesn't use any Wowza Video media and it creates a grid with recommendations after the first video plays. To work, it needs the Endscreen and MPEG-DASH plugins enabled.

If you want to configure the Endscreen plugin with Wowza Video media, see [Recommend Wowza Video media](/docs/wowza-flowplayer/plugins/endscreen/#recommend-wowza-video-media).

## Before you start

Before you can use this plugin with the standalone player, we recommend the following steps:

* Read about [embedding the core player](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) in your site by adding the minimum CSS and JavaScript player components.
* Make sure you have a player token. For more, see [Token configuration](/docs/wowza-flowplayer/player/configure/#token-configuration). Tokens aren't needed for local development.
* The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site.


## Install the plugin

To install the Endscreen plugin, include it next to the core player:


```html
<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/endscreen.min.js"></script>
```


```js
// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugins
import Endscreen from "@flowplayer/player/plugins/endscreen";
```

## Add HTML elements

embed
## Configure the plugin

The Endscreen plugin can be used in conjunction with the [Wowza Video Platform Integration](/docs/wowza-flowplayer/plugins/wowza-video-platform-integration/) plugin or on its own. In a standalone setup, you need to programmatically configure a playlist of recommendations. For more, see [Recommend other media](/docs/wowza-flowplayer/plugins/endscreen/#recommend-other-media).

The configuration properties listed in the following table are available under the `endscreen` namespace.

| Property | Type | Description |
|  --- | --- | --- |
| `auto_advance` v3.2.8+ | *boolean* | Determines if the plugin should automatically start the first recommendation (`true`) or show a recommendation grid (`false`). Default value is `true`. |


### Recommend Wowza Video media

The example in this section uses the Endscreen plugin and the Wowza Video platform to load a video and recommendations playlist. For this setup to work, you must:

* Install both the Endscreen plugin and the [Wowza Video Platform Integration](/docs/wowza-flowplayer/plugins/wowza-video-platform-integration/) plugin.
* Create a player configuration in Wowza Video that includes the Endscreen plugin. You can use an existing playlist to specify the recommendation list or let Wowza Video select the recommendations for you. This feature applies to videos only.


You can then use a [composite media ID](/docs/wowza-flowplayer/plugins/wowza-video-platform-integration/#add-composite-media-ids) to specify the source from the Wowza Video platform:


```js
const player = flowplayer("#player",
  {
    src: "[configuration-id]/[video-id]",
    token: "[your-player-token]",
    endscreen: {
      auto_advance: false
    }
  })
```

info
The `RECOMMENDATIONS_READY` event is triggered by the Wowza Video Platform Integration plugin when it has fetched the recommendations playlist, and after 80 percent of the video content plays.

### Recommend other media

If you aren't using a video from the Wowza Video platform, you can configure an end screen and recommendations programmatically as demonstrated in the following example. It's important to trigger the `RECOMMENDATIONS_READY` event before the video ends. For more, see the [Listen to plugin events](/docs/wowza-flowplayer/plugins/endscreen/#listen-to-plugin-events) section.


```js
// Initialize the player
const player = flowplayer("#player",
  {
    src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
    title: "For Bigger Fun",
    poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",
    endscreen: {auto_advance: false}
  }
);

// Define recommendations
const recommendations = {
  "playlist": [
    {
      poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
      src: [
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
      ],
      title: "For Bigger Blazes"
    },
    {
      poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
      src: [
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
      ],
      title: "For Bigger Escapes"
    }
  ]
};

// Attach event listener to video
player.on("loadstart", function () {
  player.emit(flowplayer.endscreen.events.RECOMMENDATIONS_READY, recommendations);
});
```


```js
// Initialize the player
const player = flowplayer("#player",
  {
    src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
    title: "For Bigger Fun",
    poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",
    endscreen: {auto_advance: false}
  }
);

// Define recommendations
const recommendations = {
  "playlist": [
    {
      poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
      src: [
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
      ],
      title: "For Bigger Blazes"
    },
    {
      poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
      src: [
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
      ],
      title: "For Bigger Escapes"
    }
  ]
};

// Attach event listener to video
player.on("loadstart", function () {
  player.emit(Endscreen.events.RECOMMENDATIONS_READY, recommendations);
});
```

## Listen to plugin events

This section describes the events you can capture to control and manage the plugin cuepoints within your player instance. To understand event handling differences between CDN or npm implementations, see [Plugin events](/docs/wowza-flowplayer/plugins/about-plugins/#plugin-events).

| CDN event | npm event | Description |
|  --- | --- | --- |
| `flowplayer.endscreen.events.RECOMMENDATIONS_READY` | `Endscreen.events.RECOMMENDATIONS_READY` | Listen to this event to create a recommendations grid using the data passed with the event. For an example, see [Add recommendations programmatically](/docs/wowza-flowplayer/plugins/endscreen/#recommend-other-media). |