Question

我正在尝试构建一个标准的HTML5视频播放器，通过＆lt; track＆gt;支持隐藏式字幕。元素和WebVTT。我对这款播放器的目标是不必构建自定义控件UI，而是依赖浏览器/设备提供的默认控件。

为了遵守关于隐藏式字幕的FCC规定，我还在构建一个带有字幕格式选项的菜单 - 颜色，大小，不透明度等。我想要包含的一个选项是关闭和打开字幕的切换，这在Firefox等浏览器中特别有用，其中默认控件中不存在CC按钮。

我有一切正常工作，除了一个我似乎无法弄清楚的问题。使用我的自定义切换开启或关闭字幕时，默认视频控件上的CC按钮也会切换;但是，我无法以相反的方式工作。

我正在寻找在按下默认CC按钮时触发的某种事件，以便我可以检查视频textTracks的显示/隐藏/禁用模式，然后相应地更新我的自定义切换。这样的事件是否存在？是否有任何方法可以从默认控件中删除CC按钮而其余部分保留？我不想为这一个问题为播放器构建一个完全自定义的UI。

编辑1：这是一个例子的jsFiddle。

http://jsfiddle.net/6z5e37h6/

<div class="htmlVid">
 <video width="640" height="360" controls="controls" id="vid">
  <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></source>
 </video>
</div>
<label>Captions:</label>
<input onclick="capToggle('off');" type="radio" name="captions" checked="checked" />Off
<input onclick="capToggle('on');" type="radio" name="captions" />On

<script>
 var vid = document.getElementById('vid');
 var track = vid.addTextTrack('subtitles', 'test', 'en');
 var capToggle = function (val) {
  if (val == 'on') {
   track.mode = 'showing';
  } else {
   track.mode = 'hidden';
  }
 }
</script>

正如您所看到的（在Chrome上查看）如果您选择“on”单选按钮上的标题，标题将会打开，默认控件上的默认CC按钮将激活（变为不透明）。我正在寻找的是一些知道用户点击默认CC按钮以便我可以自动更新单选按钮以反映当前状态的方法。

我宁愿不经常运行以检查此状态，特别是我计划运行的所有其他脚本。我知道有一个“oncuechange”事件，当新的标题出现时，但我想知道是否有更好的方法立即检查，而不是等待几秒钟可能更新值。

HTML5视频textTracks - 模式更改事件

0 个答案: