On This Page

Live DVRUX Plugin

In this topic, you will learn how to use the Live DVRUX plugin. This plugin skins the Brightcove Player with DVRUX controls during playback of HLS live video.

Detailing the plugin's behavior

The plugin changes the appearance and behavior of Brightcove Player to provide a better experience during live HLS playback, focusing primarily on the addition of DVR controls. With this plugin, viewers can seek to earlier points in the HLS stream as available, and they can tell in a glance where they are relative to the video's current live point.

In a paused state, you will see the play head gradually drift left as the live stream continues on without you. In 'sliding window' DVR mode, where earlier segments of video are not available after some duration, the non-available video will eventually cause the play head to reach an unplayable position. In this case, the player will reset to live video when the user hits play.

Note: The behavior described in the paragraph above will be affected how the live stream segments are expired.

There are also optional bookend features available for publishers to control what happens to the player before and after the live stream occurs and Brightcove Player is open. Those options are detailed below.

As you see in the screenshot below, when you are watching live that will be reflected in the bottom-right of the player (highlighted in the yellow box).

If you pause or scrub backwards in the stream, you will see the "fast forward" button which you can click to see the video in real time. The fast-forward button is located in the bottom-right of the player (highlighted in the yellow box).

Implement using Players module

To implement the Live DVRUX Plugin using the Players module, follow these steps:

Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.

Enter the configuration options in the Options(JSON) text box. The example below will use the bookendBefore object to display the text This live event has not yet started when someone has opened Brightcove Player but the live event has not yet started. The bookendAfter will display the source image after the live event has ended and Brightcove Player is still open.

Implement using code

To implement a plugin the player needs to know the location of the plugin code, a stylesheet if needed, the plugin name and plugin configuration options. The location of the plugin code and stylesheet are as follows:

Properties

The following plugin properties are used to control the Live DVRUX plugin:

bookendBefore:

Type: object

Creates an overlay to be shown after Brightcove Player has been loaded but before the live event has started.

Contains the following three child properties:

Name

Type

Description

startTime

number

The time the live event is scheduled to start, using epoch time in milliseconds; when this time is crossed for a bookendBefore, the bookend will clear and start playback as soon as the playlist is updated with a new segment

type

text

Must have the value either image, text or custom

src

text

When the type is image, the value is a URL to an image which overlays the video; if the image is not already the correct dimensions for the created player, it will be stretched to fill the player

When the type is text, the value is the text message to display over the video; if no src is specified, the video will display a message saying The event will start at {bookendBefore time}, followed by the printed date and time specified in the startTime

When the type is custom, the value is complete HTML code which the player will display

class

text

Name of the CSS class to add to the bookend element

bookendAfter:

Type: object

Creates an overlay to be shown after the live event has completed and Brightcove Player is still open

Contains the following three child properties:

Name

Type

Description

startTime

number

The time the live event is scheduled to complete, using epoch time in milliseconds; when the time is crossed for a bookendAfter, playback will immediately end and the bookend will be shown

type

text

Must have the value either image, text or custom

src

text

When the type is image, the value is a URL to an image which overlays the video; if the image is not already the correct dimensions for the created player, it will be stretched to fill the player

When the type is text, the value is the text message to display over the video; if no src is specified, the video will display a message saying The event concluded at {bookendAfter time}, followed by the printed date and time specified in the startTime

When the type is custom, the value is complete HTML code which the player will display

Device support

In Android and MS Edge, live stream seeking and time tooltips are not supported.

The native player takes over in iOS for iPhone, so this stylistic plugin has no effect on iPhone playback.

Time tooltips are not supported on mobile devices except for the iPad.

This plugin will not work on Windows Phone 8 or earlier, which does not support HLS or Flash.

Maximum DVR length

The DVRUX Plugin will hold DVR functionality for as long as HLS segments are available, but therein lies the problem. You will first have to be sure the live_dvr_sliding_window_duration setting on your encoder/encoding device is set to the time you wish. Even after that is set, you then have a hurdle of how long your CDN will cache the segments. For instance, Akamai defaults to supporting 30 minutes of DVR, so you will need to check with your CDN and configure appropriately.

Known issues

On Firefox, entering and exiting fullscreen sometimes freezes the stream.