Brightcove Player Sample: Get Seeked Time

Player example

As you click in the seekbar you will see the times at which you clicked displayed below the player.

See the Pen Get Seeked Time 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 getSeekedTime.
• Alter the setCurrentTime() method to simply return the seeked 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 getSeekedTime = function(player) {
  return {
  ...
};

Alter the setCurrentTime() method

Find the code which is labeled:

// ### Set seek time in 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. Therefore, you can simply assign the appropriate variable the value, and return this value so setCurrentTime() still functions correctly.

setCurrentTime: function setCurrentTime(ct) {
  seekBarClickedTime = ct;
  return ct;
}

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>

<div id="displayTimesHere"></div>

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

<script type="text/javascript">
  var seekBarClickedTime;

  // +++ Define the middleware function+++
  var getSeekedTime = function(player) {
    return {
    // +++ Set seek time in setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        seekBarClickedTime = ct;
        return ct;
      }
    }
  };

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

  // Initialize mouseup event on seekbar
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.controlBar.progressControl.seekBar.on('mouseup', function(event) {
      displayTimesHere.innerHTML += seekBarClickedTime + '<br>';
    });
  });
  </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>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="get-seeked-time.js"></script>

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