如何使用videojs开始播放视频时不显示字幕
How not to display the captions when video starts playing using videojs?
我正在使用Video.js作为自定义视频播放器,默认情况下,当视频开始播放时,它会显示字幕。如何在开始/自动播放时禁用隐藏式字幕?
var myPlayer = _V_("myPlayer");
var videoPlaying = true;
// video captions button
var myCaption = myPlayer.controlBar.addChild("button");
// Styling to empty button
$(".vjs-control-text").empty();
// Add class to captions
myCaption.addClass("vjs-captions-icon");
myCaption.addClass("vjs-captions-icon-on");
// Adding functionality to captions button
$(".vjs-captions-icon").on('touchstart', function() {
$('div.vjs-captions.vjs-text-track').toggle();
$('.vjs-control-bar .vjs-captions-icon').toggleClass('vjs-captions-icon-on').toggleClass('vjs-captions-icon-off');
});
.vjs-captions-icon-on {
background: url(../img/caption_button.png);
background-size: 100% 100%;
}
.vjs-captions-icon-off {
background: url(../img/caption_button_off.png);
background-size: 100% 100%;
}
<video id="myPlayer" class="video-js vjs-sublime-skin" width="1024px" height="768px" controls autoplay preload data-setup='{"nativeControlsForTouch": false}'>
<source src="../video/brandt.mp4" type='video/mp4' />
<track class="caption" kind="captions" src="../video/brandt.vtt" type="text/plain" srclang="en" label="English" default/>
</video>
gkatsev 的分享答案在这里回答 https://github.com/videojs/video.js/issues/2124
从那里引用。
显示 - 文本轨道可见,并且正在更新和触发事件
已禁用 - 轨道不可见且未触发事件
隐藏 - 轨道不可见,但它正在触发事件。因此,要隐藏曲目,您可以执行以下操作:
player.textTracks()[0].mode = 'disabled';
我知道
这很旧 - 但我正在研究这个问题,并使用公认的答案制定了一个脚本,直到我意识到:
在<track>
标签中,只需删除其末尾的默认标签即可。
例如,代替
<track class="caption" kind="captions" src="../video/brandt.vtt" type="text/plain" srclang="en" label="English" default/>
做
<track class="caption" kind="captions" src="../video/brandt.vtt" type="text/plain" srclang="en" label="English"/>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- 如何获得字幕显示与zurbs基金会's轨道滑块
- 如何使用videojs开始播放视频时不显示字幕
- 如何使jssor字幕仅显示在鼠标悬停上
- 使用javascript显示字幕
- HTML5视频:同时显示两个不同的字幕
- 弹性滑块根本不显示,字幕未正确显示
- 当鼠标悬停在 Jssor 中的缩略图菜单上时显示字幕
- HTML5视频+TTML字幕不显示字幕
- WordPress集成FlexSlider不显示字幕
- 视频源的JavaScript导致jssor滑块同时显示所有字幕
- VideoJS不显示字幕
- 显示多重字幕的html5视频
- 在播放器外显示字幕
- 为什么使用popcorn.js不能显示XML字幕?
- Flexslider-如何在滑块外显示字幕
- 可以't显示带有Angularjs的字幕图像模态
- 如何显示带有本地字幕的本地视频(没有网络服务器)