Question

我正在使用Video JS，我发现它真的很棒，虽然我有一个问题，因为当播放器全屏时我无法改变字幕文本的字体大小。

我所做的就是改变Video JS CSS文件，从1.4em到4em的大小。

/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}

但它不起作用，它只会在视频播放器未全屏时更改字幕大小。

你能帮我解决这个问题。我正在使用Video JS 4.1版

Answer 1

似乎我所要做的就是在

中插入字体大小

.video-js .vjs-text-track-display

CSS类

Answer 2

以下代码对我有用。参见https://github.com/videojs/video.js/issues/3301

.vjs-text-track-display div {
  font-size: 1.2em;
}

请参阅下面的完整代码：

<head>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.vjs-text-track-display div {
  font-size: 1.2em;
}
</style>
<body>

  <video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />

  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
  </video>

  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</body>

Answer 3

以下代码对我有用，可能不需要！important部分：

.video-js .vjs-text-track-cue>div {
          font-size: 0.9rem !important;
}

Video JS - 如何更改字幕字体大小

3 个答案: