'Why won't videojs play my Flash video in IE6/7/8?

I've converted an .mp4 video into ogg/webm/flv formats (with ffmpeg) and used videojs to create the following web page:

It plays fine in IE9, Chrome, Safari, Opera, and Firefox.

However, in IE6, IE7, and IE8 it is supposed to "fall back to flash" but it doesn't display anything where the video is supposed to be (testing in IETester):

enter image description here

How can I get this page to play in IE6/IE7/IE8?

.htaccess

AddType audio/ogg oga ogg
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv

index.htm

<!DOCTYPE html> 
<html>
    <head>
        <link href="videojs/video-js.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


    <script type="text/javascript">
        $(init);

        function init() {
            $('button#buttonSmallSize').click(function() {
                //$('video#my_video_1').css('width','512px');
                //$('video#my_video_1').css('height','288px');
                $('div#message').html('small size not yet implemented');
            });

            $('button#buttonLargeSize').click(function() {
                //$('video#my_video_1').css('width','768px');
                //$('video#my_video_1').css('height','432px');
                $('div#message').html('large size not yet implemented');
            });

        }

    </script>
    <style type="text/css">
        div#buttonRow {
            margin: 0 0 12px 0;
        }
        .theButton {
            float: left;
            margin: 0 5px 0 0;
            cursor: hand;
            cursor: pointer;
        }   
        .theMessage {
            float: left;
            margin: 0 5px 0 0;
            font-family: arial;
            color:#fff;
            font-size: 14pt;
        }   

    </style>

    </head>
<body style="background-color: #888">
    <div id="videobox" style="border-radius: 5px; width: 513px; padding: 10px; border: 1px solid #fff;background-image:url('images/chrome.jpg');;box-shadow: 10px 10px 5px #555">

    <div id="buttonRow">
    <button id="buttonSmallSize" class="theButton">Small Size</button>
    <button id="buttonLargeSize" class="theButton">Large Size</button>
    <div id="message" class="theMessage"></div>
    <div style="clear:both"></div>
    </div>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="512" height="288" data-setup="{}">
      <source src="videos/damconnect.mp4" type='video/mp4'>
      <source src="videos/damconnect.webm" type='video/webm'>
      <source src="videos/damconnect.ogg" type='video/ogg'>
      <source src="videos/damconnect.flv" type='video/x-flv'>
    </video>

    </div>
</body>
</html>

Solution 1:^[1]

With videojs you don't call the flash videos like that. It creates a swf that embeds a video there, just go to http://videojs.com/docs/setup/ and follow the guide.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jorgenrique

'Why won't videojs play my Flash video in IE6/7/8?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]