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文件并上传到托管服务器的根目录。效果很好。

html5视频和Firefox

1 个答案: