Cross-Device Resume with Brightcove Player

Overview

Cross-Device Resume allows viewers start watching a video on one device, and at a later time, continue watching the video where they left off on the same or a different device.

Let's say that someone starts watching a video on their mobile device. Later, they can continue watching the same video with a player on their web browser. Playback will continue where they left off, so they won't miss a thing.

If you are not familiar with this feature, see the Overview: Cross-Device Resume document.

Requirements

The following requirements apply to Cross-Device Resume:

• Brightcove Player version 6.41.0 or later; the latest release is recommended

Setup

This feature is available to anyone with a Brightcove Video Cloud account.

To get started, do the following:

• Contact your account manager to enable your account for Cross-Device Resume
• Make sure the videos you are using are ingested for Dynamic Delivery

Implementing Cross-Device Resume

To implement Cross-Device Resume, follow these steps:

1. Set the user identifier in Brightcove analytics
2. Get the viewer playback position
3. Resume playback on a Brightcove Player

Send viewer id - Brightcove player

Requirements

The following requirements are needed for the Viewer ID Tracking:

• Brightcove Player v7.18.0 or newer

First, you need to set the user identifier to store that user's viewing activity.

Brightcove Player

If you are using Brightcove Player, follow these steps:

1. Even though viewer data is sent to Brightcove analytics automatically, you need to set the user identifier. To do this, use the user() method. For example:

   myPlayer.bcAnalytics.client.user('viewer id');

   On your websites that host Brightcove Player, you can use an authentication gateway or some identity management solution to keep track of viewers. Use this viewer id as the viewer identifier to pass to Brightcove analytics.

2. It is important to set the viewer id before any source is set on the player. It should be called immediately after initializing the player.

   <video-js
     id="myPlayerID"
     data-account="1752604059001"
     data-player="hyQW6GByl"
     data-embed="default"
     controls=""
     data-video-id="6156696074001"
     data-playlist-id=""
     data-application-id=""
     width="640" height="360"></video-js>
   <script src="https://players.brightcove.net/1752604059001/hyQW6GByl_default/index.min.js"></script>
   
   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
   
       // Set the viewer id for Brightcove analytics
       myPlayer.bcAnalytics.client.user('viewer id');
     });
   </script>

3. When the user() method is used, the value is not hashed and will be sent in the clear with all subsequent beacons.

   Note that the player_init event will not include the user field in this case, but all video_* events should include it.

Custom player

If you are building a custom implementation that does not use Brightcove Player, add the user parameter to your Data Collection API requests. For details, see the Overview: Data Collection API v2 document.

You can use an authentication gateway or an identity management solution to track viewers on the sites that host your player. Use this viewer ID as the viewer identifier to pass to Brightcove analytics.

This user parameter passed to Brightcove can be used in the next section to retrieve the playback position from the XDR API.

Get the viewer playback position

Next, you will get the viewer playback position from the Cross-Device Resume (XDR) API.

You will need a server-side application to make the REST API request to get the viewer playback position.

For details, see the Getting Playback Position from XDR API document.

Resume playback

Once you get the viewer playback position from the XDR API, you can resume playback from that point.

1. With the viewer playback position from the previous section, set the playhead position using the currentTime() method.

   Here is an example:

   // The specific event to use may require some experimentation
   player.on('loadstart', function() {
   
     // This initialPlayhead variable will have to come from the publisher's
     // custom integration.
     player.currentTime(viewer playhead position);
   });

2. For a web player sample that calls a server-side proxy to get the playhead from the XDR API, see the Cross-Device Resume sample on github.