Live DVRUX Plugin

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Live Streaming
Plugins

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.

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

Showing green live

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

Showing fast forward

Implement using Players module

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

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Plugins in the left navigation menu.
  4. Next, click Add a Plugin.
  5. For the Plugin Name enter dvrux.
  6. For the JavaScript URL, enter:
    https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.js
  7. For the CSS URL, enter:
    https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.css
  8. 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.
    {
      "bookendBefore": {
        "startTime": 1426075200000,
        "type": "text",
        "src": "This live event has not yet started"
      },
      "bookendAfter": {
        "startTime": 1489233600000,
        "type": "image",
        "src": "https://solutions.brightcove.com/bcls/brightcove-player/overlay-image.png"
      }
    }
  9. Click Save.
  10. To publish the player, click Publish & Embed > Publish Changes.
  11. To close the open dialog, click Close.

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:

https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.js
https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.css

The name of the plugin is dvrux, and an example set of options is:

{
  "bookendBefore": {
    "startTime": 1426075200000,
    "type": "text",
    "src": "This live event has not yet started"
  },
  "bookendAfter": {
    "startTime": 1489233600000,
    "type": "image",
    "src": "https://solutions.brightcove.com/bcls/brightcove-player/overlay-image.png"
  }
}

The following shows using the In-Page Embed implementation of the player to associate the Live DVRUX Plugin with a single instance of a player.

  • Line 1: Uses a link tag to include the plugin's CSS in the head of the HTML page.
  • Line 5: Gives the video tag an id attribute, with some value, in this case myPlayerID.
  • Line 15: Uses a script tag to include the plugin's JavaScript in the body of the HTML page.
  • Line 19: Creates a reference to the player.
  • Lines 20-31: Calls the plugin, passing the JSON object as options. If you are not passing any options the function call is simply myPlayer.dvrux().
  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.css">
  </head>

  <body>
    <video-js id="myPlayerID"
      data-video-id="5155162396001"
      data-account="1752604059001"
      data-player="ByXXzhT3"
      data-embed="default"
      data-application-id
      class="video-js" controls></video-js>

    <script src="https://players.brightcove.net/1752604059001/ByXXzhT3_default/index.min.js"></script>

    <script src="https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.js"></script>

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.dvrux({
          "bookendBefore": {
            "startTime": 1426075200000,
            "type": "text",
            "src": "This live event has not yet started"
          },
          "bookendAfter": {
            "startTime": 1489233600000,
            "type": "image",
            "src": "https://solutions.brightcove.com/bcls/overlay-image.png"
          }
        });
      });
    </script>

The following shows using the In-Page Embed implementation of the player to associate the Live DVRUX Plugin with a single instance of a player.

  • Line 82: Uses a link tag to include the plugin's CSS in the head of the HTML page.
  • Line 83: Gives the video tag an id attribute, with some value, in this case myPlayerID.
  • Line 91: Uses a script tag to include the plugin's JavaScript in the body of the HTML page.
  • Line 95: Creates a reference to the player.
  • Lines 96-107: Calls the plugin, passing the JSON object as options. If you are not passing any options the function call is simply myPlayer.dvrux().
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.css">
  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="6454befd-5fb6-483a-ac90-bd8438b58c6a"
    data-embed="default"
    class="video-js" controls></video>

  <script src="https://players.brightcove.net/1507807800001/6454befd-5fb6-483a-ac90-bd8438b58c6a_default/index.min.js"></script>

  <script src="https://players.brightcove.net/videojs-live-dvrux/1/videojs-live-dvrux.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.dvrux({
        "bookendBefore": {
          "startTime": 1426075200000,
          "type": "text",
          "src": "This live event has not yet started"
        },
        "bookendAfter": {
          "startTime": 1489233600000,
          "type": "image",
          "src": "https://solutions.brightcove.com/bcls/overlay-image.png"
        }
      });
    });
  </script>

</body>
</html>

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
      class text Name of the CSS class to add to the bookend element

Device support

  • Common desktop operating systems' browsers, except MS Edge, are supported provided Flash is installed.
  • 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.

Changelog

29 Aug 2018

v1.3.5

  • Built unminified files

7 Aug 2018

v1.3.4

  • Fixed tooltip display

24 Jul 2018

v1.3.3

  • Hide live button if the stream is not live

15 Mar 2018

v1.3.2

  • Prevent seeking to 0 when attempting to seek to live

22 Feb 2018

v1.3.1

  • Don't seek to zero by default

1 Oct 2017

v1.3.0

  • Add custom class to bookends
  • Make it easier to select menu content
  • Fix styling when using Graphite v5 and v6

8 Aug 2017

v1.2.3

  • Fixed an issue where user could seek out of the live window

6 Jun 2017

v1.2.2

  • Fixed a build issue that left out a dependency in the minified file

8 Mar 2017

v1.2.1

  • Video.js 5 and 6 cross-compatibility.

19 Jan 2017

v1.2.0

  • Added a method to get plugin version
  • Fixed bug in which player does not autoplay when viewing VOD content

30 Sep 2016

v1.1.0

15 Sep 2016

v1.0.3

  • Updated for compatibility with Brightcove Player v5.x
  • Preliminary support for browsers with native HLS implementations
  • Added the custom type for bookends, which permits HTML for the bookend
  • Added the class attribute to bookends, which allows adding a CSS class to the bookend
  • Added a time tooltip which shows the time behind live on mousing over the progress bar

30 Jan 2015

v0.1.1

  • Initial release