1

我在 Bootstrap 风格的网站上使用 JW Player，工具提示缩略图使用 .vtt 文件。除了 JW 播放器在缩略图后面显示一个灰色背景圆角矩形外，一切都运行良好。Bootstrap 样式使缩略图后面的灰色背景太窄，以致缩略图粘在右侧的背景上。我相信这可能与 Bootstrap 3 将“box-style:border-box”与通用选择器 *. 如果我将 box-sizing 更改为 content-box 而不是 Bootstrap 所做的（参见下面代码中的注释），它会修复缩略图背景——但它当然会弄乱网站的其余部分。也许有一种方法可以只针对玩家，但我想不通。任何帮助表示赞赏。

<!-- here is the basic hosted Bootstrap code -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!--  NOTE if you uncomment this box-sizing immediately below, the problem goes away....
      .... BUT it messes up all of the other Bootstrap styles in the application -->
<!--
<style>
* {
  -webkit-box-sizing: content-box-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
</style>
-->

<script src="http://jwpsrv.com/library/5V3tOP97EeK2SxIxOUCPzg.js"></script>

<div id="container">&nbsp;</div>
<script type="text/javascript">
jwplayer("container").setup({
    height: 540,
    width: 1280,
    file: 'http://content.jwplatform.com/videos/vM7nH0Kl-640.mp4',
    image: 'http://content.jwplatform.com/thumbs/vM7nH0Kl-640.jpg',
    tracks: [{
      file: 'http://content.jwplatform.com/strips/vM7nH0Kl-120.vtt',
      kind: 'thumbnails'
    }]
});
</script>
4

1 回答 1

0

看起来可以通过将以下内容添加到您的站点来解决此问题：

<style>
.jwoverlay {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
</style>
于 2014-09-05T19:38:32.767 回答