We recommend using VideoJS as your HTML5 video player because it has extensive functionality and a plugin system.

VideoJS plugins


Track Overall Percentile (1st, 2nd, 3rd, and 4th) of Completion. This event triggers each quarter of a video.

player.on('tracking:first-quarter', (e, data) => {
    logVideoEvent(e.type, data, 25);
player.on('tracking:second-quarter', (e, data) => {
    logVideoEvent(e.type, data, 50);
player.on('tracking:third-quarter', (e, data) => {
    logVideoEvent(e.type, data, 75);
player.on('tracking:fourth-quarter', (e, data) => {
    logVideoEvent(e.type, data, 100);

function logVideoEvent(eventName, eventData, progress) {
    const mult = 1000000; // turn seconds into microseconds to get rid of decimals
    eventData.meta = {
        progress: progress,
        currentTime: this.player.currentTime() * mult,
        duration: this.player.duration() * mult,
    console.log(eventName, eventData.meta);
    mobilelocker.logEvent('Video', e.type, action, eventData);

Generate a report

Use the API to generate a report of video-watching events

presentation_idYesThe ID of the presentation
device_idNoID of the device that generated the event
session_idNoID of the session the event was created in.
user_idNoIf present, it will only return events created by this user
pageNoPage number
per_pageNoEvents per page. Max is 100.
order_byNoDefault is the device event "id".
order_dirNo"asc" or "desc". Default is "asc".
const presentationID = 77; // Or whatever your Presentation ID is.
const data = {
    presentation_id: [presentationID],
    category: 'Video',
const API_TOKEN = 'Your API token here';
const config = {
  headers: {
      Authorization: `Bearer ${API_TOKEN}`,

// Returns JSON
axios.post('https://app.mobilelocker.com/api/device_events/search', data, config)
    .then(response => {

// Returns CSV
axios.post('https://app.mobilelocker.com/api/device_events/export', data, config)
    .then(response => {