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.

Install the plugin

To install the Endscreen plugin, include it 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/endscreen.min.js"></script>

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 Add recommendations programmatically.

Properties

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

Events

To listen to events for this plugin, use the endscreen namespace with the Universal Module Definition (UMD) and global flowplayer variable. For example, use flowplayer.endscreen.events to capture an event. This table describes the object path and events for the Endscreen plugin.

Add recommendations for 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",
  { 
    token: "[your-token]",
    src: "[configuration-id]/[video-id]",
    endscreen: {
      auto_advance: false
    }
  })

Add recommendations programmatically

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 flowplayer.endscreen.events.RECOMMENDATIONS_READY event before the video ends.

// Initialize the player
const video = flowplayer("#player",
  { 
    src: "//edge.flowplayer.org/bauhaus.mp4",
    title: "Bauhaus",
    endscreen: {auto_advance: false}
  }
);

// Define recommendations
const recommendations = {
  "playlist": [
    {
      "poster": "\/\/lw-amedia-cf.lwcdn.com\/i\/v-i-c3f57245-a16e-452d-a2b2-ad40ce271513-1.jpg",
      "src": [
        "//edge.flowplayer.org/bauhaus2.mp4"
      ],
      "title": "Bauhaus 1"
    },
    {
      "poster": "\/\/lw-amedia-cf.lwcdn.com\/i\/v-i-36453690-e232-4234-8bf7-78311128b1b2-high-1.jpg",
      "src": [
        "//edge.flowplayer.org/bauhaus2.mp4"
      ],
      "title": "Bauhaus 2"
    }
  ]
};

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