- Tech Services
Concept Development
- Industry
- Emerging Tech
- Generative AI Hub
- Blog
- Contact Us
How to add annotations in video using video.js
In Lets Nurture
16
Apr. 214.18 K
VIEWSVideo.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.
Author
Posted by Lets Nurture
