Overlay plugin

The overlay plugin by Nuevodevel allows overlaying one or more texts, images, or videos at any placement, any time on the player. Timing for overlay objects is not synchronized with the player's current time, but rather with the real video watch time. A single overlay item includes several options that define the content and layout of the new object to show over the player.

txt

overlay text

img

image URL

video

video URL (MP4 or Webm)

width

video width (number of pixels)

start

time (seconds number) to start overlay display.

duration

overlay display time (seconds). If not defined, overlay will stay o top to the end of the main video.

position

default position value is top-left.
Other posssible position values are: top-center, top-right, center, center-left, center-right, bottom-left, bottom-center, bottom-right.

offsetX

offset from the left or right side (pixels or percent), default: 0px.

offsetY

offset from the top side (pixels or percent), default: 0px

fontSize

font size (text only), default: 16px.

fontWeight

font weight (text only), default: normal.

fontStyle

allows to change fontStyle CSS property undefined

fontFamily

font family (text only), default: sans-serif

color

font color (text only), default: white

background

background color (text only), default: black

border

border color (image and video), default: transparent

close button (image and video), default: false

url

optional URL to go when the user clcik or touch on image/video overlay.

You can setup one or an array of multiple overlay items, each at a different position, starting at a different time, and keep showing at a different duration. You can have only one image/video overlay at the same time. The next image/video overlay will be delayed until the preceding image/video overlay ends.
The most simple single text overlay setup code to insert after the player and nuevo plugin initialization code is like:

Code snippet

<script src="/path/to/videojs/plugins/overlay.js"></script>
<script>
player.overlay({
txt: "This is my overlay text",
start:5,
duration: 20
position: "top-right"
});
</script>

And below you can see the overlay plugin setup code used for the demo player above. There are 7 overlay objects (5 x text, 1 x image, 1 video), each starting at different times.

Code snippet

<script src="/path/to/videojs/overlay.js"></script>
<script src="/path/to/videojs/nuevo.min.js"></script>
<script src="/path/to/videojs/plugins/overlay.js"></script>
<script>
const player = videojs("veoplayer", {license: "key"});
player.nuevo({contextMenu:false});
player.overlay([
{txt:"Overlay text at the top-left position",start:2,duration:8},
{txt:"Overlay text at the bottom-right position.",position:"bottom-right",background:"#C00",start:3,duration:7},
{txt:"Overlay text at the top-right position.",position:"top-right",background:"gold",color:"black",start:4,duration:6},
{txt:"Overlay text at the bottom-right position.",position:"bottom-right",background:"cyan",color:"black",start:5,duration:5},
{img:"//images/overlay.jpg",url:'//www.nuevodevel.com/nuevo/order',start:10,duration:7,position:"center",border:"white",close:true},
{txt:"This is final overlay text at the top-center position",position:"top-center",background:"#0C0",start:17,duration:7},
{video:"//video/overlay.mp4",close:true,start:18,position:"center-right",offsetX:10,border:"#ccc"},
]);
<script>

Video overlay is playing either for requested duration or to the end (if duration is not defined) before it is destroyed. Video is always muted when playback starts. The user has an option to unmute it. When unmuted, main video goes muted.

This is possible to create and display new overlay object during video playback at any time programmatically.

Code snippet

<script>
player.overlay.new({
txt:"Overlay text at top-center position",position:"top-center",duration:20
});
<script>

The overlay plugin is included in all three available plans of the software offered by NuevoDevel.com