Contact Support | System Status
Page Contents

    Brightcove Player Sample: Disable Forward Scrubbing

    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.

    Source code

    View the complete solution on GitHub.

    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.


    Page last updated on 19 Jun 2021