Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JWPlayer6 Text Overlays, Call To Action

Hello,

I am using JWPlayer6 and want to create video annotations. Right now on my rails DB I have an annotations table that includes a start time, duration, and text. The annotations are currently displaying each video at the given start time, and disappear after the duration ends. I can't get the annotation to appear directly on the video.

The issue I am having is that I don't see how I can follow a few plugin tutorials, as the number of annotations varies from video to video, as do the annotation corrections.

I attempted to look through the call to action documentation, but https://www.jwplayer.com/blog/call-to-action-with-jw-player/ was hard to follow. Is there a way to overlay my annotation text on top of the video as opposed to under the video as it currently is doing so? Are there any more documentations on call to action?

I am looking to overlay annotations directly on top of the video in a position: absolute bottom left corner of the video.

Thank you so much

1 Community Answers

Up Down

Todd

JW Player Support Agent  
0 rated :

Please send a link to a test page showing what you have so far. I have had some success with this by creating a new <div> via Javascript and then using CSS to position the new <div> over the player, but I had to set the CSS z-index to 2147483647 in order to get the overlay to appear on top of the player while it was in fullscreen on desktops. This was working for me ~2 years ago and I have admittedly not checked since…

The challenge here is that the overlays will only work in desktop browsers, as we do not have a way to create overlays when a video is fullscreen on a mobile device.

Here’s the function I wrote back then. I’m sure there are fancier ways to do this now, but it’s what I got working a long time ago. Oh yeah, and you have to put a <div id=wrapper> around your <div> where the player goes:

<div id=wrapper><div id=player>Video goes here…</div></div>

Load your player, etc, as normal, and then try something like this:

var newOverlay = document.createElement("div");
newOverlay.id = "test";
newOverlay.setAttribute("style", "z-index: 2147483647; position: absolute; top: 106px; left: 260px; height: 100px; width: 240px; background-color: black; padding: 10px; opacity:0.8; filter:alpha(opacity=80);");
newOverlay.innerHTML = "<span style=\"font-family: 'Arial', sans-serif; color: yellow; font-weight: 800; font-size: 14px;\">Test Overlay:</span> <span  style=\"font-family: 'Arial', sans-serif; color: white; font-weight: 800; font-size: 14px;\">Can you read me?</span><br><br><span style=\"font-family: 'Arial', sans-serif; color: white; font-size: 14px;\">There should be text here...</span>";
document.getElementById('wrapper').appendChild(newOverlay);

This question has received the maximum number of answers.