Categories: Blog

How to add annotations in video using video.js

Video.js works out of the box with not only HTML <script> and <link> tags, but also all major bundlers/packagers/builders, such as Browserify, Node, WebPack, etc.

It is easy to integrate and equally easy to deploy. 

Step 1 : Creating a Player

Video.js supports all attributes of the <video> element (such as controls, preload, etc), but it also supports its own options. There are two ways to create a Video.js player and pass it options, but they both start with a standard <video> element with the attribute class=”video-js”:

First of all, you simply need to prepare video in your page

<head>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
  </head>
  <body>
    <video id="demo" controls class="video-js vjs-default-skin">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
   </video>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
   <script>
      var player = videojs('demo');
   </script>

</body>

Step 2 : Annotation Setup

For Create annotation, We need to include videojs-markers.js and markers style .

<style media="screen">   .vjs-marker{position:absolute;left:0;bottom:0;opacity:1;height:100%;transition:opacity .2s ease;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease}.vjs-marker:hover{cursor:pointer;-webkit-transform:scale(1.3,1.3);-moz-transform:scale(1.3,1.3);-o-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.vjs-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;bottom:14px;z-index:100000}.vjs-tip .vjs-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) bottom left no-repeat;bottom:0;left:50%;margin-left:-4px;position:absolute;width:9px;height:5px}.vjs-tip .vjs-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px;background-color:#000;color:#fff;max-width:200px;text-align:center}.vjs-break-overlay{visibility:hidden;position:absolute;z-index:100000;top:0}.vjs-break-overlay .vjs-break-overlay-text{padding:9px;text-align:center}
    </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>

Step 3 : Configure Annotation

Now, We have to initialize a player and set the properties to display annotation in video. For that we need to write below code.

// initialize video.js
var player = videojs('demo');

//load the marker plugin
player.markers({

  breakOverlay:{

     display: true,

     displayTime: 4,

     text: function(marker) {

        return marker.overlayText;

     },

  },

   markers: [

      {time: 9.5, overlayText: "put"},

      {time: 16, overlayText: "any"},

      {time: 23.6, overlayText: "text"},

      {time: 28, overlayText: "here"}

   ]

});


To add breaks in the video, simply add a new time (in seconds) in the list of breaks option.

Customize marker style:

The style of the markers could be modified by passing an optional setting “markerStyle” with your preference of css styles.

video.markers({
  markerStyle: {
     'width':'8px',
     'background-color': 'orange'
  },
  markers: [
      {time: 9.5, overlayText: "put"},

      {time: 16, overlayText: "any"},

      {time: 23.6, overlayText: "text"},

      {time: 28, overlayText: "here"}
  ]    
});

Videojs-markers.js provides several methods to customize your player. 

For more detail and information, you can refer to this link. http://sampingchuang.com/videojs-markers 

If you also want to share your own ideas, regarding how to add annotations in video using Video.Js, do contact us.

Lets Nurture

Share
Published by
Lets Nurture

Recent Posts

What is Generative AI?

Generative AI refers to a category of advanced algorithms designed to produce original content across…

2 weeks ago

5 Generative AI Video Tools Everyone Should Know About

Generative AI Video Tools Everyone Should Know About Generative AI is revolutionizing video creation, making…

2 weeks ago

What Exactly Are LLMs (Large Language Models)?

Large Language Models (LLMs)  are a transformative advancement in artificial intelligence, capable of understanding, processing,…

2 weeks ago

How Would You Use a Virtual Clothing Mirror in 2025

In the ever-evolving landscape of retail, virtual clothing mirrors stand out as a key differentiator,…

2 weeks ago

Introducing LetsNurture’s Smart Mirror for Retail and Beauty Businesses

As technology evolves, businesses in the retail and beauty sectors face increased pressure to innovate…

3 weeks ago

The Integral Role of AI in Augmenting the Future of AR

The technological realm is continuously evolving, and as it stands, Augmented Reality (AR) and Artificial…

3 weeks ago