Geek asks and answers

Why won't IE play video in IE6 / 7/8?

I converted .mp4 video to ogg / webm / flv formats (with ffmpeg) and used videojs to create the following webpage:

http://tanguay.info/examples/testvideo

It works great in IE9, Chrome, Safari, Opera, and Firefox.

However, in IE6, IE7, and IE8 it is assumed that it "returns to flash", but it does not display anything where the video is supposed to be (tested in IETester):

enter image description here

How can I make this page 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>
+5
source share
1 answer

videojs -, . swf, , http://videojs.com/docs/setup/ .

0

More articles:


All Articles