Videojs在Android手机中看到灰色框 [英] Videojs seeing grey boxes in android mobile

问题描述

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

I have the latest version of videojs. Only in android tablets and mobile, I'm seeing grey boxes where the play and fullscreen buttons should be. These appear properly in other video sites like youtube on the same device. I assume it's the devices own inbuilt controls. Please can anyone tell me how to replace these grey boxes for the correct icons?

推荐答案

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

The icons in the latest version of VideoJS are now contained within an icon font, which is loaded in using an @font-face rule - this used to be an image sprite.

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

The reason the font isn't loading is all to do with the syntax they [VideoJS] are using:

@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中的上述内容更改为：

Change the above in your videoJS css to:

@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文件加载此规则：

This different syntax however wont work with IE7 and IE8. If you need to support < IE9 i suggest using a conditionally loaded css file to load in this rule:

@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-on-android /

More details can be found in these blog posts http://www.mcnab.co/blog/general/font-face-on-android/ and http://www.mcnab.co/blog/general/font-face-on-android/

这篇关于Videojs在Android手机中看到灰色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！