Video.js won't play videos on IE8

Question

Video.js won't play videos on IE8

I'm trying to use Video.js 4.11 and after debugging, I still couldn't play the video in IE8 emulation. Oddly enough, video.js version 4.12 will crash when emulating IE8, and it looks like the JSON issue is related to the "data-set" tag?

Also, I noticed that even though I created my own js video skin, the "border-radius" was reversed to the default and the others worked well. (my big play button should be a circle, but in IE8 emulation it got square.)

To prove this is not a problem with my video files, I wrote a version based on the Video.js example and used a lot of my own code, but just changed a little to make the look fit my needs.

Everything I link to locally, I checked the path and they should work fine.

Any suggestions and help would be much appreciated.

Update: I solved the problem by adding this line of code:

<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>

Just in case someone else had the same problem that their flash backup is not working on IE8.

Here's my final code for reference:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">   
    <title>Video.js demo</title>  
    <link type="text/css" href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">  
    <script type="text/javascript" src="http://vjs.zencdn.net/4.11/video.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
    <style type="text/css">
       .vjs-default-skin {color: #F5F2F2;}
       .vjs-default-skin .vjs-big-play-button{left:45%;top:40%;border-radius:100%;border-width:0.1em;width:1.8em;height:1.8em;}
    </style>    
</head>
<body>
   <div style="width:700px;margin:0 auto;">     
    <video id="example" class="video-js vjs-default-skin"
            controls preload="auto" width="640" height="264"
            poster="http://video-js.zencoder.com/oceans-clip.png"
            data-setup='{}'>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <!-- Flash Fallback. -->
        <object type="application/x-shockwave-flash" data="flowplayer-6.0.1/flowplayer.swf" width="854" height="504">
            <param name="allowfullscreen" value="true">
            <param name="allowscriptaccess" value="always">
            <param name="movie" value="flowplayer-6.0.1/MirandaS1E01.flv">
            <!--[if IE8]><param name="movie" value="flowplayer.swf"><![endif]-->
        </object>
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that 
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>            
    </video>  
</div>
</body>
</html>