Markers of Video Player on Recording Service


In Recording project, we use videojs and its 3rd party plugin markers to play the video as well as marking the positions of narration texts in which we will play custom audios which are automatically generated with speech synthesis technologies or manually recorded by users.


The goal of this post is to focus on videojs's markers plugin, how to use it and its common use cases.


let markers = [
     {time: 9.5, text: "this"},
     {time: 16,  text: "is"},
     {time: 23.6,text: "so"},
     {time: 28,  text: "cool"}

  markers: markers

In above example, video is an instance of videojs object, 2 compulsory fields are time and text but you can add any additional info which you want to query later. In Recording project, we store one additional data named is_recorded to mark whether the marker already be recorded audio file for it.

Common Cases

Customize Marker Style

We can style differently between normal marker and selected marker. Each marker has style class vjs-marker and the current marker has additional style class vjs-marker-current. Based on them we can style anything we want or even add additional html code to each marker as the above screenshot.

<div data-marker-key="63e42a41-620d-44b3-b0ee-ff5617ac051d" data-marker-time="1.368872" class="vjs-marker ui-draggable ui-draggable-handle vjs-marker-current">
  <div class="cue-line">

Draggable & Update Marker's Position

We can support markers to be draggable by using draggable JS library

  start: function(event, ui) {
    //Handler when marker start moving
  drag: function(event, ui) {
    //Handler when marker is on move
  stop: function(event, ui) {
    //Hander when marker is stopped moving

Normally we can use start and drag functions to handle animation when marker is on moved, and when marker is stopped moving, stop function is triggered, and we will update markers info to database and update markers of the video with new positions.

$('#video_video .vjs-marker').remove();


Marker's Most Common Events


The event will be fired when the current position of the videojs player reaches a marker position. Please be noticed that there can be a time difference and the event is not raised precisely at marker's position time. The different can be up to 0.01 second.


The event is fired when a videojs marker is clicked and you can get the data of the clicked marker through the function argument.