隐藏停用html,在HTML5视频中切换隐藏式字幕并禁用默认视频控件(Toggling Closed Caption in HTML5 video and disabling default vide...

在HTML5视频中切换隐藏式字幕并禁用默认视频控件(Toggling Closed Caption in HTML5 video and disabling default video controls)

我有两个问题。 只要将轨道标签放入视频元素中，视频的默认控制器就会显示出来。 我有自定义控件，所以这是相当的问题。

第二。 我无法找到切换关闭字幕的方法。

HTML：

CC

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

I have two problems. As soon as I put the track tag within my video element the video's default controller shows up. I have custom controls so it's quite the problem.

Second. I can't find a way to toggle closed caption on an off.

HTML:

CC

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

原文：https://stackoverflow.com/questions/14916914

更新时间：2019-11-03 16:08

最满意答案

如果你删除了标签中对控件隐藏的任何引用(它们可能会在第一次加载时闪烁，但是一旦视频加载后它们将保持隐藏状态) controls项是布尔值：如果它存在，那么它们将显示，如果它不，那么他们不会。

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

HTML5 video not supported

.

.

.

.

v = document.getElementById("v")

v.textTracks[0].mode = "hidden"; // "showing" will make them reappear

// if you want to show the controls

v.controls = true;

.

请注意，YMMV作为不同的浏览器在标题中有不同的行为。 这适用于OSX和IE10上的Chrome / Safari(尽管关于Safari和IE的注意事项模式的值为隐藏的“0”和显示的“2”，但使用文本设置它们似乎工作。

if you remove any reference to controls in your tag that should keep the controls hidden (they may flash on first load, but once the video is loaded they will stay hidden) the controls item is boolean: if it exists then they will show, if it doesn't then they won't.

For showing and hiding the captions you need to set the mode to "showing" or "hidden" as below

HTML5 video not supported

.

.

.

.

v = document.getElementById("v")

v.textTracks[0].mode = "hidden"; // "showing" will make them reappear

// if you want to show the controls

v.controls = true;

.

Be aware that YMMV as different browsers have different behavior when it comes to captions. This works on Chrome/Safari on OSX and IE10 (though note on Safari and IE the value of mode is "0" for hidden and "2" for showing, but using the text to set them seems to work. Have not tested on iOS

相关问答

如果你删除了标签中对控件隐藏的任何引用(它们可能会在第一次加载时闪烁，但是一旦视频加载后它们将保持隐藏状态) controls项是布尔值：如果它存在，那么它们将显示，如果它不，那么他们不会。 要显示和隐藏字幕，您需要将mode设置为“显示”或“隐藏”，如下所示

controls是一个布尔属性 ： 注意：布尔属性不允许值“true”和“false”。 为了表示一个虚假的值，属性必须完全省略。 Like this:

vid.ontimeupdate = function(){

var percentage = ( vid.currentTime / vid.duration ) * 100;

$("#custom-seekbar span").css("width", percentage+"%");

};

$("#custom-seekbar").on("click", function(e){

...

经过一些研究后，似乎谷歌Chrome和Firefox不支持mp4视频，但支持其他格式。 所以我将不得不更改脚本上传，并可能将视频转换为其他格式。 资源 After doing some research it seems that google chrome and firefox doesnt support mp4 videos but support other formats. So i will have to change the script to upload and maybe

...

var video = document.getElementById("video"); // assuming "video" is your videos' id

video.removeAttribute("controls");

例如： http ： //jsfiddle.net/dySyv/1/ var video = document.getElementById("video"); // assuming "video" is your videos' id

video.remo

...

看来你有两个选择。 第一个是根据需要简单地删除和替换controls属性。 这将是最简单的解决方案 element.setAttribute('controls', '')

只需在需要时将控件放回原处。 另一种选择是根本不使用浏览器控件，定义自己的自定义控件，并根据需要隐藏或显示它们。 It seems like you have two options here. The first one is to simply remove and replace the controls attrib

...

更新：忽略我之前的答案(如果对所涉及的逻辑有任何用处，请留下以下内容)...结果显示有一个事件显示字幕轨道的更改时间：