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

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

第二.我无法找到一种关闭关闭字幕的方法.

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>中对控件的任何引用应该保持控件隐藏的标记(它们可能会在第一次加载时闪烁,但一旦视频加载它们将保持隐藏)控件项是布尔值：如果它存在则会显示,如果不存在则它们将不会.

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

<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上测试过

标签：html,javascript,html5,html5-video,closed-captions
来源： https://codeday.me/bug/20191007/1869741.html