javascript - JWPlayer 如何从 Javascript 更改字幕轨道？

Question

在 JWPlayer 中，如何更改(或设置)我喜欢的字幕轨道......可以通过单击外部 HTML 按钮来说明。

让我们说:

• 如果我点击 html [ Button 1]，视频将带有“eng.srt”的字幕。
• 如果我点击 html [ 按钮 2]，视频将带有“esp.srt”的字幕。

而且可能从一开始就没有字幕轨道。相应的字幕轨道将在单击 html 按钮时设置(甚至在播放时？)

Answer 1

您可以使用此 javascript-api-reference 更改字幕

Captions

These API calls are used to listen to or update the active captions track if one or more closed captions tracks are provided with a video. This API can be used to log captions usage or build your own CC menu outside JW Player.

设置当前字幕(索引) 将可见字幕轨道更改为提供的索引。索引必须在 getCaptionsList 提供的列表中。请注意，索引 0 始终会关闭字幕。

onCaptionsList(回调) 当更新可用字幕轨道列表时触发。在播放列表项目开始播放后不久发生。事件属性: 轨道(数组):带有新字幕轨道的完整数组。

onCaptionsChange(回调) 当事件字幕轨道改变时触发。发生在响应例如用户单击控制栏 CC 菜单或调用 setCurrentCaptions 的脚本。事件属性: track (Number):getCaptionsList() 数组中新事件字幕轨道的索引。请注意，如果轨道为 0，则字幕为关闭。

Example set up

<div id="myElement"></div>
<div id="Off_sub">OFF</div>
<div id="Eng_sub">ENG</div>
<div id="Farsi_sub">FARSI</div>
<div id="Jap_sub">JAPANESE</div>
<div id="Russ_sub">RUSSIAN</div>

<script>
    jwplayer("myElement").setup({
      playlist: [{
        image: "/uploads/myPoster.jpg",
        file: "/uploads/myVideo.mp4",
        tracks: [
          { file: "/uploads/myCaptionsEn.vtt", label: "English", kind: "subtitles" },
          { file: "/uploads/myCaptionsFa.vtt", label: "Farsi", kind: "subtitles" },
          { file: "/uploads/myCaptionsJa.vtt", label: "Japanese", kind: "subtitles" },
          { file: "/uploads/myCaptionsRu.vtt", label: "Russian", kind: "subtitles" }
        ]
      }]
    });
</script>

您的要求

<script>

$("#Off_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(0);//off the caption
});
$("#Eng_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(1);//Eng caption
});
$("#Farsi_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(2);//Farsi caption
});
$("#Jap_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(3);//Japanese caption
});
$("#Russ_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(4);//Russian caption
});
</script>

请参阅下面的 API 列表以更好地理解:

Javascript API Reference

Multiple Subtitle Tracks

Adding Video Captions

希望对你有帮助:)