使用videojs开始播放视频时如何不显示字幕?
How not to display the captions when video starts playing using videojs?
我正在使用 Video.js 自定义视频播放器,默认情况下它会在视频开始播放时显示字幕。如何在 start/autoplay 上禁用隐藏式字幕?
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 answered here https://github.com/videojs/video.js/issues/2124
的答案
从那里引用。
showing - the text track is visible and updating and firing events
disabled - the track track isn't visible and isn't firing events
hidden - the track track isn't visible but it is firing events.
So, to hide a track, you can do:
player.textTracks()[0].mode = 'disabled';
我知道这是旧的 - 但我正在研究这个问题,并使用已接受的答案制定了一个脚本,直到我意识到:
在<track>
标签中,只需删除其末尾的default标签即可。
例如而不是
<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"/>
我正在使用 Video.js 自定义视频播放器,默认情况下它会在视频开始播放时显示字幕。如何在 start/autoplay 上禁用隐藏式字幕?
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 answered here https://github.com/videojs/video.js/issues/2124
的答案从那里引用。
showing - the text track is visible and updating and firing events
disabled - the track track isn't visible and isn't firing events
hidden - the track track isn't visible but it is firing events.So, to hide a track, you can do:
player.textTracks()[0].mode = 'disabled';
我知道这是旧的 - 但我正在研究这个问题,并使用已接受的答案制定了一个脚本,直到我意识到:
在<track>
标签中,只需删除其末尾的default标签即可。
例如而不是
<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"/>