html5-video - Videojs在Android手机中看到灰色框

Question

我有最新版本的 videojs。仅在 android 平板电脑和手机中，我看到播放和全屏按钮应位于的灰色框。这些在同一设备上的其他视频网站（如 youtube）中正确显示。我认为这是设备自己的内置控件。请谁能告诉我如何用正确的图标替换这些灰色框？

Answer 1

最新版本的 VideoJS 中的图标现在包含在一个图标字体中，该字体使用 @font-face 规则加载 - 这曾经是一个图像精灵。

字体未加载的原因与他们 [VideoJS] 使用的语法有关：

@font-face{
  font-family: 'VideoJS';
  src: url('font/vjs.eot');
  src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
  url('font/vjs.woff') format('woff'),
  url('font/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

将您的 videoJS css 中的上述内容更改为：

@font-face{
  font-family: 'VideoJS';
  src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
  url('font/vjs.woff') format('woff'),
  url('font/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然而，这种不同的语法不适用于 IE7 和 IE8。如果您需要支持 < IE9，我建议使用有条件加载的 css 文件来加载此规则：

@font-face {
    font-family: 'VideoJS';
    src: url('font/vjs.eot');
}

更多详细信息可以在这些博客文章中找到http://www.mcnab.co/blog/general/font-face-on-android/和http://www.mcnab.co/blog/general/font-face-在安卓/