2

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

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

我的一切工作正常，除了一个我似乎无法弄清楚的问题。在使用我的自定义切换打开或关闭字幕时，默认视频控件上的 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 上查看），如果您选择“打开”单选按钮，则字幕将打开，并且默认控件上的默认 CC 按钮将激活（变为不透明）。我正在寻找的是某种方式来知道用户单击了默认的 CC 按钮，以便我可以自动更新单选按钮以反映当前状态。

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

4

0 回答 0