5

我已将 .mp4 视频转换为 ogg/webm/flv 格式（使用 ffmpeg）并使用 videojs 创建以下网页：

http://tanguay.info/examples/testvideo

它在 IE9、Chrome、Safari、Opera 和 Firefox 中运行良好。

但是，在IE6、IE7 和 IE8中，它应该“退回到 Flash”，但它不会显示视频应该在的任何位置（在 IETester 中测试）：

在此处输入图像描述

如何让这个页面在 IE6/IE7/IE8 中播放？

.htaccess

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

索引.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>
4

1 回答 1

0

使用 videojs，您不会像那样调用 flash 视频。它会创建一个嵌入视频的 swf，只需访问http://videojs.com/docs/setup/并按照指南进行操作。

于 2012-06-18T18:14:43.053 回答