Videojs seeing grey boxes in android mobile

Question

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?

Answer 1

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.

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;
}

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;
}

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');
}

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/