Перевод субтитров

В конструкторе есть возможность разделить субтитры на отдельные слова, если нужно показать перевод при наведении или нажатии на каждое слово. Для этого нужно включить опцию Модули / Субтитры / Разделять на слова для перевода

В этом случае плеер разделит субтитры на слова и привяжет к каждому слову CSS стиль playerjs_subtitle_word, чтобы вы смогли настроить дизайн и поведение. Например, в примере ниже слово при наведении курсора окрашивается в желтый цвет.

Также плеер вешает на каждое слово вызов глобальной js функции PlayerjsSubtitle при нажатии / наведении курсора и передает в нее объект события event. В нем можно найти тип события event.type (onclick, mouseover, mouseout, mouseup, mousedown) и слово для перевода event.target.innerHTML. Вы можете выстроить нужную логику самостоятельно, чтобы перевод показывался только при наведении, либо только при нажатии, либо и так и так.

Перевод слова нужно отправить плееру, создав для этого контейнер командой box. Эта команда API позволяет создать элемент в интерфейсе плеера с нужным идентификатором. По этому id можно найти элемент в DOM страницы, оформить, заполнить текстом и удалить, когда он перестанет быть нужен.

Пример

JavaScript код этого примера (используется jQuery, функция Translate должна возвращать перевод слова).

var player_playing = false;
var player_fullscreen = false;

function PlayerjsSubtitle(event){
   event.cancelBubble = true;
   var word = event.target.innerHTML;
   var type = event.type;
   if(word && type){
      player_fullscreen = player.api("isfullscreen");
      if(type=="mouseover"){
         word = word.replace(/[.:,s]/g, "");
         if(player.api("playing") && !player_playing){
            player.api("pause");
            player_playing = true;
         }
         player.api("box","playerjs_subtitle_box");
         $("#playerjs_subtitle_box").html(Translate(word));
         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});
      }
      if(type=="mouseout"){
         if(player_playing){
            player.api("play");
            player_playing = false;
         }
         $("#playerjs_subtitle_box").remove();
      }
   }
}

CSS

.playerjs_subtitle_word{
   cursor:pointer;
}
.playerjs_subtitle_word:hover{
   color:yellow;
}
#playerjs_subtitle_box{
   color:orange;
   padding:4px 7px;
   background:rgba(0,0,0,0.8);
    position:absolute;
   top:0;left:0;
}

Обратите внимание, что этот модуль не переводит текст субтитров, а лишь подготавливает к этому интерфейс плеера. Сам перевод нужно реализовать на стороне сервера. Например, можно воспользоваться облачными сервисами от Google или Яндекса. Опция доступна в полной версии конструктора PRO

Специальные теги

С версии 19.12.15 можно использовать теги <phrase> и <ignore>, чтобы объединять несколько слов в фразы и игнорировать определенные символы.

<phrase>Coming up</phrase>, why one hello <ignore>a</ignore> day

---