html5 video and firefox_问答_开发者_运维开发者技术经验分享

So, I created a nice little html5 video player with a playlist and some jQuery transitions between the playlist view and the video view. It works great in Chrome/Safari. However, firefox is a different story. All the jQuery business works just fine; however, the videos do not display. Rather, I am left with a grey-x. I've tried switching from straight ogg to ogv format which does not work either.

When I go straight to the file the browser attempts to download it rather then play it. I saw a similar post on this forum where it was a problem with the MIME settings and he fixed it somehow. I'm not sure if that is the same problem for me - so a little help would be muchly appreciated.

You can check it out here

Here is the entire code for the page; including all jQuery functions.

<!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>

Thanks for any and all help!

Turns out it was neither a coding nor a FireFox issue - it was actually an problem with the GoDaddy IIS - they do not have any of the Theora MIME types.

To fix create a web.config file with the new MIMEs in it and upload to the root of your hosting server. Works perfectly.