【问题标题】:How not to display the captions when video starts playing using videojs?使用 videojs 开始播放视频时如何不显示字幕?
【发布时间】:2020-10-03 01:26:01
【问题描述】:

我将 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>

【问题讨论】:

    标签: javascript jquery video.js


    【解决方案1】:

    来自gkatsev的分享答案https://github.com/videojs/video.js/issues/2124在这里回答

    从那里引用。

    显示 - 文本轨道可见并且更新和触发事件
    已禁用 - 轨道轨迹不可见且未触发事件
    hidden - 轨道不可见,但它正在触发事件。

    因此,要隐藏曲目,您可以:

    player.textTracks()[0].mode = 'disabled';
    

    【讨论】:

      【解决方案2】:

      我知道这很旧 - 但我正在研究这个问题,并使用公认的答案制定了一个脚本,直到我意识到:

      &lt;track&gt;标签中,删除末尾的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"/>    
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-03-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-07-25
        相关资源
        最近更新 更多