在HTML5视频中切换关闭字幕并禁用默认视频控件

Question

在HTML5视频中切换关闭字幕并禁用默认视频控件

javascripthtmlhtml5-videoclosed-captions

13

我有两个问题。一旦我在视频元素中加入track标签，视频的默认控制器就会显示出来。我有自定义控制器，所以这是一个相当大的问题。

第二个问题是，我找不到打开或关闭字幕的方法。

HTML：

<video id="trailers" poster="images/poster/poster.jpg">
                <source src="media/vLast.mp4" type="video/mp4">
                <source src="media/vLast.webm" type="video/webm">
                <track id="mytrack" label="English Subtitles" src="subtitles.vtt" srclang="en" default />
 </video> 

 <button id="cc">CC</button>

JS：

  var cc = document.getElementById('cc');
function cc(){
       var video= document.getElementById('media');
       var track1 = video.textTracks[0];
       var mytrack = document.getElementById('mytrack');
       var track2 = mytrack.track;
       console.log(track1);
       console.log(track2);
    }
    cc.addEventListener('click',cc,false);

- Batman

在您的<video>标记中设置controls=false应该处理第一个问题（或者使用video.controls=false从脚本中处理它）。对于第二个问题，video.textTracks.mode=n可以解决问题（1=隐藏，2=显示）..我手头没有示例，所以这只是半记得的理论（因此是评论而不是答案）。 - Offbeatmammal

2个回答

0

为了在Webkit浏览器（如Chrome，Safari等）中完全禁用控件的显示，您还可以添加以下CSS以避免原始控件的“闪烁”效果。

::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}

- Hawkeye64

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Offbeatmammal · Accepted Answer

如果您在<video>标签中删除对controls的任何引用，这将使控件保持隐藏（它们可能会在第一次加载时闪烁，但一旦视频加载完成，它们就会保持隐藏）。controls属性是布尔值：如果存在，则显示控件，如果不存在，则不显示。

要显示或隐藏字幕，您需要将mode设置为"showing"或"hidden"，如下所示：

<video autoplay loop id="v">
    <source src="Video.mp4" type="video/mp4">
    <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
    HTML5 video not supported
</video>
.
.
.  
<script>
.
v = document.getElementById("v")
v.textTracks[0].mode = "hidden";  // "showing" will make them reappear
    // if you want to show the controls
v.controls = true;
.
</script>

请注意，由于不同的浏览器在字幕方面有不同的行为，因此您可能会遇到不同的情况。这在OSX上的Chrome / Safari和IE10上有效（尽管请注意，在Safari和IE上，模式的值为“0”表示隐藏，“2”表示显示，但使用文本设置它们似乎是有效的。未在iOS上进行测试。