How to split the subtitles into words to translation

With a PRO version you can organize the translation of subtitles when you hover or click on any word. You can enable this option in the builder Modules / Subtitles / Split into words for translation

In this case, the player will divide the subtitles into words and attach the playerjs_subtitle_word CSS style to each word so that you can customize the design and behavior. For example, in the demo below on this page, when you hover the cursor, the word turns yellow.

The player also hangs the global js PlayerjsSubtitle function for each word and passes the event object. In this object you can find the event.type (onclick, mouseover, mouseout, mouseup, mousedown) and the word for the translation You can build the necessary logic on your own, so that the translation is shown only when you hover, or only when you click, or both practices.

The translation of the word should be sent to the player by creating a container for this with the box command. This API command allows you to create an element in the player interface with the desired identifier. By this id, you can find an element in the DOM page, arrange it, fill it with text and delete it when it is no longer needed.


Example JavaScript (using jQuery, the Translate function should return a word translation).

var player_playing = false;
var player_fullscreen = false;

function PlayerjsSubtitle(event){
   event.cancelBubble = true;
   var word =;
   var type = event.type;
   if(word && type){
      player_fullscreen = player.api("isfullscreen");
         word = word.replace(/[.:,s]/g, "");
         player_playing = player.api("playing");
         var left = (event.pageX + (!player_fullscreen?window.scrollX - $("#player").offset().left:0)+10)+"px";
         var top = (event.pageY + (!player_fullscreen?window.scrollY - $("#player").offset().top:0)+10)+"px";
         $("#playerjs_subtitle_box").css({"left":left, "top":top});
   padding:4px 7px;

2019 © PlayerJS


Restore password
Sign up
Log in

Sign up free

Sign up
By signing up, you agree to Terms of Service
Login if you have an account


Your name
Order player

Restore password

Forgot email? Contact us