Hack to support IE6 + IE7

[doublex]

Thanks a lot to fix #508.

Please fix also IE6 + IE7. It is very easy: Simply move the font-specification (font-family,font-size,...) from the ":before" pseudo-class and use the "*zoom:innerhtml()" hack. E.g.:

Current:

/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
  display: block;
  z-index: 2;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 12.0em;
  height: 8.0em;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;

  /* Need a slightly gray bg so it can be seen on black backgrounds */
  background-color: rgb(40, 40, 40);
  background-color: rgba(7, 40, 50, 0.7);

  border: 0.3em solid rgb(50, 50, 50);
  border-color: rgba(255, 255, 255, 0.25);

  -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
          border-radius: 25px;

  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
     -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
          box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);

  -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
     -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s;
       -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s;
          transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s;
}

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001"; /* Play icon */
  font-family: VideoJS;
  font-size: 3em;
  line-height: 2.66;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center; /* Needed for IE8 */

  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

Suggested fix:

.vjs-default-skin .vjs-big-play-button {
  display: block;
  z-index: 2;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 4.0em;                  /* CHANGED FROM 12.0em */
  height: 3.0em;                 /* CHANGED FROM 8.0em */
  margin: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;

  font-family: VideoJS;                 /* MOVED FROM :before pseudo class */ 
  font-size: 3em;
  line-height: 3;                 /* CHANGED FROM 2.66em */
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center; /* Needed for IE8 */

  /* fix IE6+IE7 */
  *zoom: expression(this.innerHTML='\e001');                 /* ADDED TO FIX IE6 + IE8 */

  /* Need a slightly gray bg so it can be seen on black backgrounds */
  background-color: rgb(40, 40, 40);
  background-color: rgba(7, 40, 50, 0.7);

  border: 0.1em solid rgb(50, 50, 50);                 /* CHANGED FROM 0.3em */ 
  border-color: rgba(255, 255, 255, 0.25);

  -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
          border-radius: 25px;

  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
     -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
          box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);

  -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
     -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s;
       -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s;
          transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s;
}

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001"; /* Play icon */

  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

[heff]

Is that really all it takes? Why does moving the font to the main element fix oldIE?

[doublex]

This here shows the play button on IE6 + IE7 (asterix hides the rule from IE8+):

.vjs-default-skin .vjs-big-play-button {
  ...
  *zoom: expression(this.innerHTML='\e001');
  ...
}

But the "play"-icon is very small, because the "font-size: 3em" rule belongs to the ":before" pseudo-class.
So, moving the font-specification from ".vjs-default-skin .vjs-big-play-button:before" to ".vjs-default-skin .vjs-big-play-button" fixes this issue. Works also with other browsers, because the font-properties are derived.

By moving the font-specification, one has to change also the "width", "height", and "border" properties:

.vjs-default-skin .vjs-big-play-button {
  ....
  font-size: 3em;
  ...
  width: 4.0em;                  /* CHANGED FROM 12.0em (12em/3em=4em) */
  height: 2.66em;                 /* CHANGED FROM 8.0em (8em/3em=2.66em) */
  border: 0.1em solid rgb(50, 50, 50);                 /* CHANGED FROM 0.3em */ 
  ...
}

This trick works also for the elements on the control bar.

[9mm]

I also would love to see this for IE7

[khomel]

Agreed, this would be great in the default file. I'm also trying to make the elements in the control bar appear, but the zoom: innerhtml trick does not seem to be working. Any ideas why adding them to the play/pause etc. wouldn't work properly?

[doublex]

Works for me (tested with IE6+IE7 on WindowsXP, Firefox, Google Chrome and Opera):
http://doppelbauer.name/video-js/demo.html

Here the patch against VJS 4.1:

490,491c490,491
<   width: 12.0em;
<   height: 8.0em;
---
>   width: 4.0em;                 /* CHANGED FROM 12em: 12em/3em = 4em */
>   height: 2.66em;               /* CHANGED FROM 8em: 8em/3em = 2.66em */
497c497,505
< 
---
>   
>   /* MOVED FROM .vjs-default-skin .vjs-big-play-button:before */
>   font-family: VideoJS;
>   font-size: 3em;
>   line-height: 2.66;
>   text-shadow: 0.05em 0.05em 0.1em #000;
>   /* HACK IE6+IE7 */
>   *zoom: expression(this.innerHTML='\e001');
>   
502c510
<   border: 0.3em solid rgb(50, 50, 50);
---
>   border: 0.1em solid rgb(50, 50, 50);          /* CHANGED FROM 0.3em */
540,543d547
<   font-family: VideoJS;
<   font-size: 3em;
<   line-height: 2.66;
<   text-shadow: 0.05em 0.05em 0.1em #000;

[khomel]

Still not getting controls even on that page...at least in IE7 mode in IE10. IE7 users report no controls as well.

[doublex]

I agree with you, VideoJS should work on IE6+IE7 to the point to be useable.
The problem: IE6+IE7 does not support the ":before" pseudo-class.
The »»»*zoom: expression(this.innerHTML='\e001');«««-hack tries to workaround this issue.
So you have to hack all the ":before" you need.

Example (untested):
http://doppelbauer.name/video-js2/demo.html

[khomel]

Right, that's what I meant in my previous post...the zoom: hack not really working properly for the play/pause/full screen buttons. Bummer. I appreciate your fix for the initial play button!

[rowilsonh]

if not work in ie7 or ie8, better. the end of the day, no one notices. thanks

[doublex]

The "*zoom: innerHTML()"-hack should also work for the control-bar.
In the above example I forgot to move the "font-family" from
".vjs-default-skin .vjs-control:before" to
".vjs-default-skin .vjs-control".

http://doppelbauer.name/video-js3/demo.html

[khomel]

So in that demo you are seeing the control bar in IE7? I press play and the control bar is gone. This is in IE10 in IE7 mode, by the way.

[doublex]

Good question.
The problem: This 'play' event:
"player.one('play', function(){...})" in "vjs.ControlBar = ..."
is never triggered.
I don't have enough javascript knowledge to fix this.

[doublex]

Thanks a lot for pointing out.
The problem, the "this.innerHTML=..." completly replaced the innerHTML.
The solution is, to use "this.innerHTML+=...".
The down below fix also also optimizes IE6+IE7 with one-time expressions.
Please take a look:
http://doppelbauer.name/video-js-410-ie7/demo.html
Patch:
http://doppelbauer.name/video-js-410-ie7/video-js.css.patch

[khomel]

Yes, that works well! Thanks for looking into that! I appreciate it. Now maybe we can get the videojs folks to incorporate it into the CDN version... :)

[dominic-p]

+1, this patch looks like a great idea to me. I would recommend splitting all of the old IE stuff out into a separate file, and then use conditional comments to load it only when necessary.

The only potential issue I see is when videos are dynamically loaded on the page. I remember reading somewhere that the expressions in CSS files only run once when the CSS file is loaded, but I can't confirm that.

[khomel]

I'm using it and loading videos dynamically and it's working. The play button never switches to pause, but everything else works thanks to doublex's great work.

[dominic-p]

@khomel, that's great to hear. @doublex, any chance we can get a pull request for this? I imagine it as 2 operations:

• Modify the core video-js.less file to support the changes
• Add a video-js-ie.css file that can be conditionally loaded for old IEs

This would also resolve #509 I believe.

[paulcredmond]

This is a great fix, recommended pull request.

[osgiliath-stone]

I have a problem with IE8 (haven't tested with IE6 or IE7). I am posting here because I cannot find similar posts about this topic. Everything appears to be working fine, but I get a gray box where the play button should be. If I click the border of the gray box the video is converted to flash and it plays. Also, the controls are half/barely visible once it does play. It appears that something is causing the play button not to appear, and I think it may be related to the font issue. Will this fix work for my problem in IE8?

[khomel]

I just checked my test in IE8 mode (on IE10) and IE8 works. I've changed the play button so I can't comment on that part, but the control bar works like a charm.

[osgiliath-stone]

Okay, I finally got it to work on IE8. I just downloaded the CSS file directly from http://doppelbauer.name/video-js-410-ie7/video-js.css, and uploaded it to my server. I tried to hand code the various suggestions on this thread. Nothing I did worked. doublex's "patch" was extremely confusing and the line numbers did not match with anything I was working on. On doublex's "patch" there were many more changes to the code than what was listed anywhere on this thread. I am new to programming so it was not immediately apparent that I needed to insert variations of this.innerHTML+= in many, many places in the CSS file. I don't actually have a "play" button. It looks more like fast forward button that you would find on a television remote. But it works, and people should be sensible enough to click the fast fowardy button and realize that it is a play button. If anyone has any good ideas of making the button actually look like a play button I'm all ears.

Update: It seems the buttons are being displayed twice. It wasn't a fast-forward button, but two play buttons. Something in my website's code is interfering with the hacks to the CSS on this thread.

The html page needs this for IE8:

[mjvotaw]

I just wanted to say thanks for putting this hack together, I hope it makes its way into the actual project. Despite having used videoJS on several projects, I had never noticed that it didn't work in IE7, thankfully this patch fixed all of the issues I was having.

[heff]

Would people on this thread be willing to share stats on user IE version usage for their sites? Bonus points if you can narrow it down to users who watch videos some how.

StatCounter reports less than 1% for both IE 6 & 7 based on pageviews, but page views isn't exactly the best metric to go by.

[dominic-p]

Over the past 6 mo, IE 7 & 6 accounted for around 1% of my total visits. I don't have stats of who's watching video unfortunately.

Seems like a small number percentage-wise, but each visitor could be valuable, and I'd rather not throw any away if I can help it. To me, the major advantage of going with a library like Video.js is that compatibility with old browsers is handled for you. Otherwise, why not just throw up vanilla HTML5 <video> tags and save the ~50KB download? Just my 2 cents.

[mjvotaw]

In my company's case, it's not that the end-users may be using IE7, it's that our clients are using it. I'm sure everyone is aware that large companies tend to get tied down to old hardware/software, much to the chagrin of those that work with them.

I would love nothing more than to stop supporting IE7, but we know that the ONLY hits in IE7 will come from the clients themselves. We're basically forced to develop for it. So the unfortunate truth is that, even though the rest of humanity has moved on, some people still have to keep IE6/7/8 in mind, because clients refuse to update their PC's.

Whether or not that's a good reason to include support is entirely up for debate. As long as there is at least some way to achieve basic functionality (like a css patch for a very specific version for videoJS) that would satisfy my needs.

[doublex]

IE 6: 0.1%
IE 7: 1.7%
(according to "awstats", ~ 5 million page impression per day)

[bcls]

no wish to start a flame war here, but I'm just going to say it: I know that no one likes to leave an end-user out, but we should all be aware that there is a real cost to continuing support for IE 6-8 in bloated, hack-ridden code that takes longer to develop and test, and is harder to maintain. I commend the current trend among many developers to instead just not provide full functionality for those browsers as a way of pressuring lazy users or IT departments to upgrade to a reasonably current browser.

[dominic-p]

In general, I agree, but I think the issue is "full functionality." I'm all for providing a sub-par experience for obsolete browsers, but, for my organization at least, basic functionality is still a requirement.

[heff]

Is the video unplayable right now in IE6+7? I'm considering adding an issue to make sure the big play button works and the video at least plays in IE6+7 for v4.3.0.

[khomel]

It plays, but none of the controls worked until we started modifying based
on DoubleX's changes.

As we've said before, sub par is OK for older browsers, but basic
functionality (like play/pause) needs to be there.

On Tue, Oct 8, 2013 at 3:37 PM, Steve Heffernan [email protected]:

Is the video unplayable right now in IE6+7? I'm considering adding an
issue to make sure the big play button works and the video at least plays
in IE6+7 for v4.3.0.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/539#issuecomment-25925297
.

[doublex]

I agree - basic functionality (play/pause/fullscreen) would be enough for IE7. Maybe the situation is different in one or two years.
If the uncompressed CSS is 22k or 23k - I don't care.
The "*zoom"-hack is tested for a decade and should not interfere with other browsers.

[doublex]

I have updated the patch. It looks much cleaner now:
Current CSS: http://doppelbauer.name/video-js-421/video-js.css
Patched CSS: http://doppelbauer.name/video-js-421/video-js-patch.css
Difference: http://doppelbauer.name/video-js-421/video-js-diff.txt

[corydorning]

Awesome work @doublex! For those of you who utilize H5BP or conditional HTML tags for IE, a compatible version of this fix can be found here:

https://gist.github.com/corydorning/7087867

[heff]

Would anyone be interested in creating a "plugin" for ie6/7 support? Sounds like it could start as just a CSS file in its own repo.

We're not going to be able to pull ie6/7 support into core, but if there's a plugin for it in the ecosystem I'd be happy to help with it.

[dominic-p]

This sounds like a great idea. I don't have the time to maintain it right now (I'm still treading water using the file I proposed in the closed pull request), but I would love to see it happen and I'll help as I can.

[t2y]

I'm finding IE7 patch for 4.3.0. Does the 421-patch work for 4.3.0?

[doublex]

The IE6/IE7 stylesheet (should work for any future release):
http://doppelbauer.name/videojs-4.3.0/video-js-ie7.css

If you use "conditional comments" (like this demo) you could remove the asterix hacks.
Demo: http://doppelbauer.name/videojs-4.3.0/demo.html

[t2y]

It works for me. Thank you for this hack!

[GoOz]

This hack shows the play button and it still clickable but… is it me (or my VMs) or the play icon never turns into a pause icon when you pause the video or did i miss something?
I used this hack http://doppelbauer.name/videojs-4.3.0/video-js-ie7.css

[t2y]

I'm using this hack for IE8 with document Mode of IE7. I had the same issue, the play icon never turns into a pause icon.

[doublex]

I don't think, that a CSS hack could fix this issue.
The rule ".vjs-default-skin.vjs-playing .vjs-play-control" was useless - I removed it.
There are more problems, e.g. IE7 does not display the playbutton/controlbar semi-transparent black (if you apply a "filter:gradient"-rule, IE6 starts crashing...)

[GoOz]

Well, i don't think the support of transparency on the background is really relevant. It has no meaning, it's just design, an opaque background is enough. But the icon switch does have a meaning.
Anyway, i don't think that a CSS hack could fix it, i may have to use a full JS solution on this one.

[Bigtieger]

If u want a black background for Play-Button and Control-Bar add:

.vjs-default-skin .vjs-control-bar {
*background-color: #07141e;
}
.vjs-default-skin .vjs-big-play-button {
*background-color: #07141e;
}

[doublex]

@Bittieger
Added to:
http://doppelbauer.name/video-js-4.4.1/video-js-ie7.css

[commonpike]

Great. Doesnt work in ie7 emulation mode from my ie11, though. It just never seems to validate any zoom:expression() css there. Can someone confirm it works in 7, just not in emulation mode ?

[Bigtieger]

I tested it in nativ IE6 and with IE8-> IE7 emulation mode both worked. IE11 simply cant emulate IE7 or IE8 right.

[heff]

I'm going to close this issue because I don't see us pulling this into core, but I would still love to see someone turn this into plugin that can be used and updated independently. We can even add a line to the docs pointing to the solution. In video.js core we'll do our best to avoid irreversibly breaking IE6/7.