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.
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> |
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> |
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.
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.
Web design was once an element of online brand-building that you needed to know how…
Financial services and banking are being reshaped and revolutionized by what artificial intelligence has made…
Yes, you can add Google Maps to your Android app, providing seamless, interactive mapping for…
SEO and digital marketing are constantly evolving. It happens slowly but quickly at the same…
As an AI development team, we regularly encounter scenarios and questions from clients regarding AI…
Predictive analytics is your ultimate guide to data-backed business strategy. Data-driven insights, proactive decision-making, and…