javascript 在 HTML5 视频中切换隐藏式字幕并禁用默认视频控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14916914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggling Closed Caption in HTML5 video and disabling default video controls
提问by Batman
I have two problems. As soon as I put the track tag within my video element the video's default controller shows up. I have custom controls so it's quite the problem.
我有两个问题。一旦我将轨道标签放在我的视频元素中，视频的默认控制器就会出现。我有自定义控件，所以这是一个很大的问题。
Second. I can't find a way to toggle closed caption on an off.
第二。我找不到关闭关闭字幕的方法。
HTML:
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:
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);
回答by Offbeatmammal
if you remove any reference to controlsin your <video>tag that should keep the controls hidden (they may flash on first load, but once the video is loaded they will stay hidden) the controlsitem is boolean: if it exists then they will show, if it doesn't then they won't.
如果你删除的任何引用controls您的<video>代码，必须保持隐藏控件（它们可能会闪烁第一次加载，但一旦视频被加载，他们将留隐患）的controls项目是布尔值：如果它存在，那么他们将显示，如果它不不那么他们不会。
For showing and hiding the captions you need to set the modeto "showing" or "hidden" as below
要显示和隐藏字幕，您需要将 设置mode为“显示”或“隐藏”，如下所示
<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>
Be aware that YMMV as different browsers have different behavior when it comes to captions. This works on Chrome/Safari on OSX and IE10 (though note on Safari and IE the value of mode is "0" for hidden and "2" for showing, but using the text to set them seems to work. Have not tested on iOS
请注意，YMMV 作为不同的浏览器在字幕方面有不同的行为。这适用于 OSX 和 IE10 上的 Chrome/Safari（尽管在 Safari 和 IE 上注意，模式的值是“0”表示隐藏，“2”表示显示，但使用文本设置它们似乎有效。尚未在 iOS 上测试
回答by Hawkeye64
To disable the controls fromshowing up at all (for webkit browsers - chrome, safari, etc), you can also add the following css to avoid the "blink" effect with original controls.
要完全禁用控件显示（对于 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;
}
