Video.js breaks IE9 and IE10 under certain, unknown, parameters

Question

I've been banging my head against my desk for months now trying to find a solution to this problem. The biggest issue is that it only pops up in certain circumstances. Since modern.ie launched and IE10 was released I've renewed my search for answers.

I'm running Win7 64-bit and currently have the latest IE10 (10.0.9200.16521). When I load a site with video.js installed it fails in standards mode. But works with Flash in quirks mode. Removing video.js in various ways loads the video(s) fine with IE10's HTML5 capabilities. This even actually happens on the videojs.com home page. So far I've tried the following suggestions from other locations...

• Use a full path instead of relative URLs.
• Change to preload="none"
• Running IE after disabling add-ons
• Running IE in safe mode
• Running IE as a separate user
• Numerous other similar things months ago I don't recall.

I have successfully run the site on fresh installs inside virtual machines. And my Win7 64-bit computer at home. But my machine at work, previously with IE9 and now with IE10 does not work. I've seen similar posts so I know I'm not alone. Does anyone have any new suggestions?

A super simple example that exhibits this issue can be found in this other question: video.js videos get stuck in IE9 and IE10, double length on Mac Safari

Update: Found a reference to forcing IE to use Flash. Thought it might be a workaround while trying to get IE to use HTML5. It successfully made other browsers use Flash (in a test to make sure my IE conditional comment wasn't messed up). IE still did not work.

Update 2: I have found other web sites that are totally unrelated that also fail to load. Considering this issue does not happen on a fresh install I may need to resort to an attempt to remove IE and install from a fresh download. Sadly this will not actually locate what is causing this issue so I may hold off and sift through the video.js source. That'll take a LOT of time so if anyone comes up with a solution in the meantime please let everyone know.

Answer 1

It took a few more random shots in the dark (uninstalling plugins, dropping to IE8 and then installing a fresh copy of IE10) before I resorted to sifting through "Related" links on here. But I finally found the solution.

Drop Helvetica from the videojs style sheets.

(And the rest of your styles).

Once I removed all instances of Helvetica from my style sheets everything worked beautifully.

I've known Windows doesn't get along with old Type 1 fonts—like Helvetica (I need it installed since my company's logo is set in it and it's bitten me before). What I didn't realize was that IE9 and IE10 effectively can't render them at all and that's what was killing videojs.

Sadly we can't force users to go out and buy new versions of Helvetica or Helvetica Nueue. So my suggestion is dropping it in favor of "sans-serif".

h1 {
    font-family: sans-serif;
}