Brightcove Player Sample: Disable Forward Scrubbing

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Playback
Type
Support Doc

In this topic, you will learn how to use a middleware function to disable forward scrubbing until a specified percentage of the video has been played.

Player example

Initially you will NOT be able to scrub forward, but it is possible to scrub backward. Once the video reaches 50% played, you can scrub either forward or backward. The percentage of when to allow forward scrubbing is easily set in the code.

See the Pen Disable Forward Scrubbing by Brightcove Learning Services (@rcrooks1969) on CodePen.

View the source code.

Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
    1. Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    2. In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
    3. View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.

Middleware functions

This sample uses Video.js middleware to implement the code solution. At a very high level, the use cases where middleware is of most value is when you want to intercept and alter core behaviors of the player, such as setting the source or current time. Video.js middleware in general is not discussed at length in this document, but the actual code used for the middleware function is explained. Here are documents from Video.js sources that do detail middleware:

Implementing middleware functions with Brightcove Player

The simplest way to use a middleware function is to:

  1. Write the middleware function.
  2. Place the middleware function either on the page with the player in a script tag, or include the middleware function using the src attribute with a script tag. Both implementations will be shown in this document.
  3. Register the middleware function with the player using the use() method, as shown here:
    videojs.use('mimeType', functionName);

    For the mimetype you can use a standard video mimetype, like video/mp4, or use an * if you wish the middleware function to act on all mimetypes.

Player/HTML configuration

This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.

Player configuration

No special configuration is required for the Brightcove Player you create for this sample.

Other HTML

No other HTML elements are added to the page.

Application flow

The basic logic behind this application is:

  • Implement the basic syntax for a middleware function, naming the function disableForwardScrubbing.
  • Implement the required setSource() method.
  • Alter the setCurrentTime() method to check if the time to which the viewer is trying to scrub is less than the current time in the player, or the scrub forward percentage has passed. If either is true, move the playhead to that time. If false, keep the video playing at the current time.

Create the skeleton for the middleware function

Find the code which is labeled:

// +++ Define the middleware function+++

The basic syntax for creating a middleware function is as follows:

var disableForwardScrubbing = function(player) {
  return {
  ...
};

Note that the player object is passed to the function.

Implement the setSource() method

Find the code which is labeled:

// ### Implement setSource() ###

This is a required method for every middleware function. By using the syntax shown means the middleware will always be selected, irregardless of the video type:

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

Alter the setCurrentTime() method

Find the code which is labeled:

// ### Alter the setCurrentTime method ###

This code block is where the actual setCurrentTime() method is altered. To understand this, the first point to know is that the ct value passed to the function reflects the value to which the viewer is scrubbing. The if statement checks to see if the new value is smaller than the player's current time or exceeds the percentage to allow forward scrubbing. If either is true, the new value is returned, which causes the playhead to be moved to the new value. If the condition is false, which means the viewer is trying to scrub forward before being allowed, the player's current time is returned and playback is not altered.

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

Application styling

The CSS on the page simply sets the size of the player.

Using the middleware function

Once the middleware function has been written you want to use it. Two ways were mentioned earlier, and will be detailed now.

Code on same page as player

Here you define the middleware function on the same page as the player, then register it.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

Code included on player page

In the following code, the JavaScript for the middleware function and the use() method to register it are simply included in the page.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

See the function-in-separate-file section in the GitHub repo for full code.