Video.js doesn't work with 2 videos on page in IE8

Question

I am using video.js. It works great and videos play in all browsers.

The problem I am having is that when I have 2 videos on the same page in IE8, only one works. The other is just a big black rectangle where the video should be. When I remove the code for one of the videos, the other works just fine. As soon as I add the code back in, 1 stops working.

Is there a fix I can use to get multiple videos working on the one page in IE?

Answer 1

Are you giving each player a unique name/string in the video object id? This would also apply to any containing divs or objects for Flash fallback as well.

    <video id="video-id-1" class="video-js vjs-default-skin" controls
      width="960" height="540" poster="video-1-poster.jpg" data-setup="{}">
      <source src="video-1-file.mp4" type='video/mp4'>
    </video>

    <video id="video-id-2" class="video-js vjs-default-skin" controls
      width="960" height="540" poster="video-2-poster.jpg" data-setup="{}">
      <source src="video-2-file.mp4" type='video/mp4'>
    </video>