Video JS is a fantastic cross-browser HTML 5 player with good support for older browsers such as IE 8 by making use of Flash video fallback.
After using Video JS on a recent project where I needed to dynamically change the video, I noticed an issue in IE 8 and IE 9 which was preventing the poster from being changed when selecting a new video.
This was because I was trying to target the ‘poster’ attribute on the video tag directly using the following code:
var videoposter = 'poster-image-file.jpg'; $('#video-tag-id video').attr('poster', videoposter);
It turned out to be far easier to target the class of the overlay div – ‘vjs-poster’ – that is created by Video JS:
var videoposter = "poster-image-file.jpg" $('.vjs-poster').css({ 'background-image': 'url('+videoposter+')', 'display': 'block' });
Dynamically changing the Video JS poster using this method is far more reliable and has been tested on all major browsers including IE 8+, Chrome, FireFox and Safari
| ‘ .$cat[‘Name’]. ‘ |