Video.js: Icon font not loading in in IE8 (emulator)

Created on 5 Apr 2016  路  6Comments  路  Source: videojs/video.js

I am loading video.js(5.8.8) with the standard css file video-js.css which, in turn, requests VideoJS.eot

The icons appear as expected in all browsers including (actual) IE8. The issue of the icons not showing up is seen when loading the video player in IE-11 or IE-Edge when the browser is in IE-8 emulation mode. Unfortunately, this is a use case that I am required to support.

To produce the bug:

  1. Launch page containing video app in IE11 or IE-Edge
  2. Open the F12 developer tools
  3. Change the document mode to '8' and reload the page

Icons are expected to load as usual, but are not showing at all, and the network tab does not report any attempt to fetch the resource.

I am using the most recent version of video-js available on the cdn (5.8.8). I'm running OSX, but I have tested on a local vm with IE11 and on browserstack with both IE11 and Edge(latest).

I have also opened an issue on Stackoverflow.

Most helpful comment

@ownmaster , did you check out the pull request where I referenced this issue? It's here:
https://github.com/videojs/font/pull/14/commits/60bb3079115ff8691ffa9567159020318638db77

We have made a similar change to our production codebase and the fonts seem to be working on all emulators. We are currently deploying video.js 5.12.6, but it doesn't seem to me that the version should matter.

All 6 comments

Ok... I think I have found a solution. It seems that the emulator will ignore the file containing the 'iefix' param (I'm sure for a really good reason). I am seeing the icons in all browsers now when the resource is requested both ways(with and without 'iefix').

Thanks for the issue, however, we don't support emulation modes in IE and we don't want to add support for it, as minimal as it may seem.
Supporting emulation mode isn't like supporting IE8 itself as there are a whole bunch of idiosyncrasies with maintaining the emulation mode, as you've seen yourself.
The solution here may be to host your own version of the css file.
Thanks, and sorry we can't help you.

Understandable. Word on the street(internet) is that there are more users using a modern IE browser in enterprise mode than there are IE8 itself in order to support old applications that are not compatible with modern browsers. Unfortunately, one of the idiosyncrasies with the emulators is that their user agent does not report the document mode, and so this rumor is difficult to confirm. The old applications are likely not using videojs, however the fix is simple enough so maybe you will merge it anyway. We will update our own css in order to support this use case.

@shanepoints

Ok... I think I have found a solution. It seems that the emulator will ignore the file containing the 'iefix' param (I'm sure for a really good reason). I am seeing the icons in all browsers now when the resource is requested both ways(with and without 'iefix').

Can you provide CSS code which works for you and video.js version that actually works with that modified CSS?

@ownmaster , did you check out the pull request where I referenced this issue? It's here:
https://github.com/videojs/font/pull/14/commits/60bb3079115ff8691ffa9567159020318638db77

We have made a similar change to our production codebase and the fonts seem to be working on all emulators. We are currently deploying video.js 5.12.6, but it doesn't seem to me that the version should matter.

@shanepoints
Thanks, that solves the problem (tested on video.js 5.20.4). This is really sad that such a small fix is not applied to the project.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

victorpfm picture victorpfm  路  4Comments

askaliuk picture askaliuk  路  3Comments

pblasi picture pblasi  路  3Comments

d3x7r0 picture d3x7r0  路  4Comments

dingyaguang117 picture dingyaguang117  路  4Comments