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

Toggling Closed Caption in HTML5 video and disabling default video controls

本文关键字：视频 默认 控件 闭路 HTML5 切换 字幕      更新时间：2023-09-26

我有两个问题。当我把音轨标签放在视频元素中时，视频的默认控制器就会出现。我有自定义控件，所以这是个大问题。

第二。我找不到打开或关闭隐藏字幕的方法。

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);

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

为了显示和隐藏字幕，您需要将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>

请注意，YMMV作为不同的浏览器在字幕方面有不同的行为。这适用于OSX和IE10上的Chrome/Safari（尽管注意，在Safari和IE上，模式值为"0"表示隐藏，"2"表示显示，但使用文本设置它们似乎有效。尚未在iOS 上测试

要完全禁止控件显示（对于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;
}
相关文章：