In this sample you will see after a set amount of time, an overlay message is displayed. This sample will display the overlay in 6 seconds, but the time is configurable. If the viewer clicks the message within a specified time, then playback continues. If not, the video is paused. This technique is useful if you have long-form content. This will keep you from wasting bandwidth on viewers who start playing a video and then leave to do something else without bothering to stop it.
This sample uses an open source Video.js Plugin located at https://github.com/TylerZubke/Videojs-AFK-Monitor. The sample code in this document will utilize this plugin.
See the Pen Are you Still Watching? by Brightcove Learning Services (@rcrooks1969) on CodePen.
View the complete solution on GitHub.
Here are some tips to effectively use the above CodePen:
Here is the recommended development sequence:
For details about these steps, review the Step-by-Step: Plugin Development guide.
When developing enhancements for the Brightcove Player you will need to decide if the code is a best fit for the iframe or In-Page embed implementation. The best practice recommendation is to build a plugin for use with an iframe implementation. The advantages of using the iframe player are:
Although integrating the In-Page embed player can be more complex, there are times when you will plan your code around that implementation. To generalize, this approach is best when the containing page needs to communicate to the player. Specifically, here are some examples:
Even if your final implementation does not use the iframe code, you can still use the In-Page embed code with a plugin for your JavaScript and a separate file for your CSS. This encapsulates your logic so that you can easily use it in multiple players.
| API Methods | API Events | Brightcove Player Plugins |
|---|---|---|
| addClass() | useractive | Overlay Plugin |
| removeClass() | userinactive | |
| pause() | ||
| currentTime() | ||
| one() | ||
| on() | ||
| setTimeout() | ||
| hasClass() | ||
| duration() | ||
| paused() | ||
| clearTimeout() | ||
| hasStarted() | ||
| el() |
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.
No special configuration is required for the Brightcove Player you create for this sample.
The third party plugin's CSS and JavaScript files are included.
The basic logic behind this application is:
useractive and userinactive events are watched to track time.The plugin is called using best practices, as shown here
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
A number of options can be used to customize the plugin. Some details are:
showMessageAfter (in milliseconds) determines the time before the button is displayed.
pausePlayerAfter (in milliseconds) options is also helpful. This is time you allow the user to click the button before the player is paused. This give the user a chance to click the button without interrupting video playback.The CSS is part of the third party plugin.
You will want to clone the repo to access the code and then place it in an Internet accessible location for your use.
As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: videojs.afk-monitor.js.
Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.