Question

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

二。我无法找到一种方法来关闭隐藏式字幕。

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

Answer 1

如果您删除controls标记中<video>的任何引号，该引号应隐藏控件（它们可能会在首次加载时闪烁，但一旦视频加载，它们将保持隐藏状态）{{ 1}} item是布尔值：如果它存在，那么它们将显示，如果不存在那么它们将不显示。

要显示和隐藏字幕，您需要将controls设置为“显示”或“隐藏”，如下所示

mode

请注意，YMMV作为不同的浏览器在字幕方面有不同的行为。这适用于OSX和IE10上的Chrome / Safari（虽然在Safari和IE上注意模式的值为“0”表示隐藏，“2”表示显示，但使用文本设置它们似乎可以正常工作。还没有在iOS上测试过

Answer 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;
}

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

2 个答案: