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

set custom text to jw-time-tip when dragging the control bar


I would like to show some custom text in the jw-time-tip instead of showing the jwplayer's original seek time when user drags the control bar.

I tried the "seek" event but failed. I noticed after I updated the text in jw-time-tip, it was then overwritten by the jwplayer's seek time. So as I was dragging the control bar, the tool tip kept showing the video time instead of my custom text.

My codes is as below:
jwplayer("myplayer").on("seek", function () {
console.log("-----------------------");
console.log("seeking...");
console.log("before: " + $(".jw-time-tip .jw-text").text());
$(".jw-time-tip .jw-text").text("set something");
console.log("after: " + $(".jw-time-tip .jw-text").text());
setTimeout(function () {
console.log("5ms later: " + $(".jw-time-tip .jw-text").text());
}, 5);
});

and the console output looks like below:
-----------------------
seeking...
before: 01:39
after: set something
5ms later: 01:50
-----------------------
seeking...
before: 19:29
after: set something
5ms later: 19:50
-----------------------
seeking...
before: 41:51
after: set something
5ms later: 42:33
-----------------------
seeking...
before: 15:55:17
after: set something
5ms later: set something <- this is where the mouseup, finally the text is set

Anyone has any idea how to do that? Many thanks for the help

5 Community Answers

Heidi

JW Player Support Agent  
0 rated :

We generally provide limited support for this kind of customization, especially since it looks like you are using jQuery in your setup. However, for the type of functionality you’d like to create, we recommend you use a chromeless player, and build your own UI for the player:

https://developer.jwplayer.com/jw-player/demos/basic/chromeless-player/

This way, you are able to completely replace the default player UI behavior with your custom setup.

Heidi

Heidi Williams-Foy
Support Team Lead
JW Player

Joe

User  
0 rated :

Hi Heidi,

Thanks for your suggestion, will give it a try

Joe

Heidi

JW Player Support Agent  
0 rated :

No problem, thanks for reaching out to JW Support.

Joe

User  
0 rated :

Finally, I found a way to do it, though not sure if it's a proper one, just for sharing in case someone also need it:

$("body").on("DOMNodeInserted", "div.jw-time-tip .jw-text", function () {
if ($(this).text() != "set something..."){
$(this).text("set something...");
}
});

Heidi

JW Player Support Agent  
0 rated :

Thank you for sharing your solution!

Heidi

This question has received the maximum number of answers.