no icons in video.js implementation

[mishakob]

It's a weird thing, but it seems my implementation of the script doesn't show any icons. No play button, no pause button - just black squares, though clickable and operational.
I'm using the default - just as suggested in the Starting Up chapter.

What could cause this?

[jaredwalters]

I had a similar problem and it turned out to be because my server wasn't recognizing the SVG mime type. I added this to my .htaccess file and it fixed the problem:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

[dmlap]

Are you using video.js 4? Does your browser support web fonts?

[Questorian]

I have exactly the same problem. It all works fine but I cannot see any controls, Play button, pause, nothing. you can control it if you know where the buttons should be. For example:

I am using Wordpress 3.5.1, video.js plugin, upgraded from 3.x to 4.0, content hosted on Amazon S3, and IE10 browser (Windows 8). It does seem to display controls properly on my iPhone.

you can see it for yourself here:
http://www.raginggoldenbull.com/video-the-creature-from-jekyll-island/

So what changed between 3.x and 4.0? Any ideas?

don't understand relevance of either two replies above; editing server .htaccess, and webfonts - cant see relevance to this case?

(It's bizarre that complex wizardry works but simple things like buttons don't?!)

[Questorian]

well just checked and it works in FireFox 20.0.1 - so it seems to be something about IE10 or it's installation on my reference machine - any ideas?

[jamiedoherty]

I encountered this issue in IE7 or later versions of internet explorer in compatibility mode. The new styles in version 4.0+ use some properties that are not supported in earlier versions of Internet Explorer. To fix, I added some fallback rules for IE7 to my stylesheet using background images. You'll need a conditional IE7 stylesheet or use modernizr and reference the .no-generatedcontent class. This is all copied from the previous version (http://vjs.zencdn.net/c/video-js.css):

.vjs-default-skin.vjs-paused .vjs-play-control div {
width:15px;
height:17px;
background:url('http://vjs.zencdn.net/c/video-js.png');
margin:.5em auto 0
}
.vjs-default-skin.vjs-playing .vjs-play-control div {
width:15px;
height:17px;
background:url('http://vjs.zencdn.net/c/video-js.png') -25px 0;
margin:.5em auto 0
}
.vjs-default-skin .vjs-rewind-control div {
width:19px;
height:16px;
background:url('http://vjs.zencdn.net/c/video-js.png');
margin:.5em auto 0
}
.vjs-default-skin .vjs-mute-control div {
width:22px;
height:16px;
background:url('http://vjs.zencdn.net/c/video-js.png') -75px -25px;
margin:.5em auto 0
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0 div {
background:url('http://vjs.zencdn.net/c/video-js.png') 0 -25px
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1 div {
background:url('http://vjs.zencdn.net/c/video-js.png') -25px -25px
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2 div {
background:url('http://vjs.zencdn.net/c/video-js.png') -50px -25px
}
.vjs-default-skin div.vjs-seek-handle {
position:absolute;
width:16px;
height:16px;
margin-top:-0.3em;
left:0;
top:0;
background:url('http://vjs.zencdn.net/c/video-js.png') 0 -50px;
}
.vjs-default-skin .vjs-fullscreen-control div {
width:16px;
height:16px;
background:url('http://vjs.zencdn.net/c/video-js.png') -50px 0;
margin:.5em auto 0
}
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div {
background:url('http://vjs.zencdn.net/c/video-js.png') -75px 0
}
.vjs-default-skin .vjs-big-play-button {
display:block;
z-index:2;
position:absolute;
top:50%;
left:50%;
width:8.0em;
height:8.0em;
margin:-42px 0 0 -42px;
text-align:center;
vertical-align:center;
cursor:pointer!important;
border:.2em solid #fff;
background:#454545;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#3f3f3f', GradientType=0);
}
.vjs-default-skin div.vjs-big-play-button span {
position:absolute;
top:50%;
left:50%;
display:block;
width:35px;
height:42px;
margin:-20px 0 0 -15px;
background:url('http://vjs.zencdn.net/c/video-js.png') -100px 0
}
.vjs-default-skin .vjs-menu-button div {
background:url('http://vjs.zencdn.net/c/video-js.png') 0 -75px no-repeat;
width:16px;
height:16px;
margin:.2em auto 0;
padding:0
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
text-decoration:underline;
background:url('http://vjs.zencdn.net/c/video-js.png') -125px -50px no-repeat
}

[gkatsev]

I like the idea of putting oldIE support in a separate stylesheet.

[heff]

@mishakob were you able to get it working with any of these?

[mishakob]

@heff, @jamiedoherty - I tried using the IE7 stylesheet. It does show the play-button in IE, but I've been unable to play the clip, the play-button doesn't respond.

In Chrome or Firefox there are essentially double controls - I guess the stylesheet goes over the existing controls. The solution would be to make it show only under IE browser - any ideas? How do I do that?

[jerrylau]

This worked for me. Added an IE conditional comments to include the CSS above.

[DavidMutchler]

Chapters do not appear to work for me in Chrome 28 (don't know about earlier Chrome versions). The problem that I am encountering is that the chapters.vtt file is not loaded when the script runs, so the code returns a NULL object (and schedules the file to be loaded later). Loading later is not a problem, perhaps, but returning a NULL object breaks the code that calls the code that makes the Chapters menu items. Chapters worked in IE 10 for me because IE 10 loaded the file -- I don't know why Chrome waits till later. I hope to make a branch that fixes this, contact me if you want to follow up.

[heff]

If someone here or in #539 wants to try their hand at a pull request for a oldIE.css that'd be great. As of 4.0 we're saying IE8 is the bottom version we're actively supporting (since IE6 + 7 are under 1% users according to statcounter), so we've got some other priorities ahead of this at the moment.

@DavidMutchler If you can find a fix for the chapters that'd be great. It's not exactly the same issue as the icons so please start a new issue for it.

[heff]

If anyone has more information on this issue please add it. I'm going to close this for now since it would seem to concern unsupported browsers. Check #539 for IE6/7 info.