在 HTML5 视频中切换隐藏式字幕并禁用默认视频控件

Posted 2023-05-07

【中文标题】在 HTML5 视频中切换隐藏式字幕并禁用默认视频控件

【英文标题】：Toggling Closed Caption in HTML5 video and disabling default video controls

【发布时间】：2013-02-01 17:44:29

【问题描述】：

我有两个问题。一旦我将轨道标签放在我的视频元素中，视频的默认控制器就会显示出来。我有自定义控件，所以这是个很大的问题。

第二。我找不到关闭字幕的方法。

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

【问题讨论】：

controls=false 在您的

【参考方案1】：

如果您在 <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 上测试

【讨论】：

我没有引用视频标签中的控件。我尝试将控件设置为 false，但没有实现任何目标

很高兴文本轨道正常工作。您是否尝试以编程方式将控件设置为 false？什么操作系统/浏览器组合？

im 使用我确实在加载时使用 eventListener 将其设置为 false。因此，当网站加载时，它确实会显示几秒钟，但到目前为止，这是我能找到的唯一解决方案。你可以在这里看到：www3.carleton.ca/clubs/sissa/html5/video.html

是的，如果有字幕轨道直到源加载并且缺少控件被注册，则看起来控件默认为“打开”。您可以做的一件事是仅使用手动控制的海报隐藏视频元素，直到 onload（或 onCanPlay 或类似内容，具体取决于您何时想将控制权交给用户）触发

【参考方案2】：

要完全禁止控件显示（对于 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;