Brightcove Player Sample: Disable Forward Scrubbing

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.

Source code

View the complete solution on GitHub.

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:

• Middleware (from the Video.js documentation set)
• Feature Spotlight: Middleware (from the Video.js blog)
• videojs-playbackrate-adjuster (a sample app)

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=""
  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=""
  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.