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.

Before you start

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

• Read about embedding the core player in your site by adding the minimum CSS and JavaScript player components.
• Make sure you have a player token. For more, see 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:

<!-- 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>

// 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

Add the HTML components to render the player elements on your page:

<div id="player"></div>

Configure the plugin

The Endscreen plugin can be used in conjunction with the 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.

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

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 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 to specify the source from the Wowza Video platform:

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

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

// 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);
});

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