html5 视频和火狐

Question

所以，我创建了一个漂亮的小 html5 视频播放器，它带有一个播放列表以及播放列表视图和视频视图之间的一些 jQuery 转换。它在 Chrome/Safari 中运行良好。但是，Firefox 是另一回事。所有的 jQuery 业务都运行良好；但是，视频不显示。相反，我留下了一个灰色的x。我试过从直接 ogg 切换到 ogv 格式，但也不起作用。

当我直接访问该文件时，浏览器会尝试下载它而不是播放它。 我在这个论坛上看到了一个类似的帖子，它是 MIME 设置的问题，他以某种方式修复了它。我不确定这对我来说是不是同样的问题 - 所以非常感谢您提供一点帮助。

您可以查看here

这是页面的完整代码；包括所有 jQuery 函数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Erin Foote \\ Copywriter - 8mm Stories</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //init settings
    $('#close-btn').css({'visibility' : 'hidden'});

    //$('#preLoader').css({'visibility' : 'visible'});
    //-------Text-to-Image Replacement-------\\
    //replacing h1 and h2 with coresponding images
    //using different replace method to keep client name/occupation SEOed
    $('#menu h1').each(function() {
        string = $(this).text();
        filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
        $(this).html('<img src="images/header-' + filename + '.png" />')
        $('#vid h1').css({
        'position' : 'relative',
        'top' : '-20px'
        });
    });

    //typography for video menu
    $('#menu ul li:odd').css({'text-align' : 'right'});

    //set up selection class for videos
    $('#menu ul li a').click(function() {
        $(this).addClass('selected');
    });

    //set up close function on close-btn
    $('#close-btn').click(function() {

        //fade in the video and the close button
        $('#vid video').animate({opacity : 0}, 1000);
        $('#close-btn').animate({opacity : 0}, 1000);

        //fade out menu/title
        $('#menu').delay(500).animate({opacity : 1}, 1000);
        $('#menu').css({'visibility' : 'visible'}).delay(500).animate({opacity : 1}, 1000);

        //remove selected class from just watch li a
        $('#menu ul li a').removeClass('selected');

        //remove video from dom
        $('#videoCont video').remove();
   });
});

function getVideo()
{
    var browser;
    var fileExt;
    var string;
    var filename;

    //detect browser and match proper extension
    if($.browser.mozilla) {
        browser = 'gecko';
        fileExt = 'ogv';
    }
    else if($.browser.msie) {
        browser = 'trident';
         fileExt = 'mp4';
    }
    else if($.browser.opera) {
        browser = 'presto';
        fileExt = 'ogv';
    }
    else if($.browser.safari) {
        browser = 'web-kit';
        fileExt = 'mp4';
    }

    //grab filename from html and grab file from server
        string = $('#menu .selected').text();
        filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');


    //fade out menu/title
    $('#menu').animate({opacity : 0}, 1000);

    //get and place video video
    //(seeing that gecko browsers don't handle the expanded video tag well
    // and webkit browsers dont seem to handle the shorter video tage
    // we must find out which browser the user is using and append the right video tag and info

    if(browser == 'gecko') {    
        $('#videoCont').html('<video width="640" height="480" src="/work/video/' + filename + '.' + fileExt + '"></video>');
    }
    else {
        $('#videoCont').html('<video class="preload" width="640" height="480" controls=""                               autoplay="autoplay"><source src="work/video/' + filename + '.' + fileExt + '" type="video/' + fileExt         + '"></video>');
    } 

    //fade in the video and the close button
    $('#vid video').delay(500).animate({opacity : 1}, 1000);
    $('#close-btn').delay(500).css({'visibility':'visible'}).animate({opacity : .6}, 1000);
}
</script>
</head>

<body>
<video src="acting-art-director.ogv" type='video/ogg; codecs="theora, vorbis"'>
your browser does not support the video tag
</video>

<div id="vid">
    <div id="menu">
        <h1>8mm Stories</h1>
        <ul>
            <li><a href="javascript:getVideo();">Yacht</a></li>
            <li><a href="javascript:getVideo();">pink</a></li>
            <li><a href="javascript:getVideo();">he cared</a></li>
            <li><a href="javascript:getVideo();">footerexia</a></li>
            <li><a href="javascript:getVideo();">the answer</a></li>
            <li><a href="javascript:getVideo();">yummy</a></li>
            <li><a href="javascript:getVideo();">teeth</a></li>
            <li><a href="javascript:getVideo();">moms</a></li>
            <li><a href="javascript:getVideo();">i am smiling</a></li>
            <li><a href="javascript:getVideo();">head over heals</a></li>
            <li><a href="javascript:getVideo();">presents</a></li>
            <li><a href="javascript:getVideo();">the shoes and tattoos remain</a></li>
            <li><a href="javascript:getVideo();">the doctor</a></li>
            <li><a href="javascript:getVideo();">acting art director</a></li>
            <li><a href="javascript:getVideo();">the sound they made</a></li>
            <li><a href="javascript:getVideo();">the reason</a></li>
        </ul>

        <a href="index.html" class="home">home</a>
    </div>

    <div id="close-btn">x</div>
    <div id="videoCont"></div>
</div>

<div id="girl"></div>

</body>
</html>

感谢您的帮助！

Answer 1

事实证明这既不是编码问题也不是 FireFox 问题 - 实际上是 GoDaddy IIS 的问题 - 它们没有任何 Theora MIME 类型。

要修复创建一个包含新 MIME 的 web.config 文件并将其上传到托管服务器的根目录。 完美运行。