Brightcove Player Sample: Get Seeked Time

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

In this topic, you will learn how to get the time to which the user is seeking.

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.

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 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
  class="video-js"
  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
  class="video-js"
  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.