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

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>标签中的任何引用应该保持控件隐藏(它们可能会在第一次加载时闪烁,但一旦视频加载它们将保持隐藏)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上测试过