html5視頻和火狐

所以，我創建了一個漂亮的小html5視頻播放器，播放列表和一些jQuery轉換播放列表視圖和視頻視圖之間。它在Chrome/Safari中效果很好。但是，Firefox是一個不同的故事。所有的jQuery業務運作良好;但是，視頻不顯示。相反，我留下了灰色的x。我試過從直接的ogg切換到ogv格式，這也不起作用。html5視頻和火狐

當我直接瀏覽文件時，瀏覽器嘗試下載它，然後播放它。我在這個論壇上看到類似的帖子，這是一個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>

感謝您的幫助！

來源

2010-10-10 mattelliottIT

.ogv視頻是否在沒有jQuery的Firefox中播放？這應該表明它是否是服務器配置問題。 – cbeer 2010-10-11 17:07:49

我鼓勵您查看一些現有的html5視頻javascript庫，這可能有助於瀏覽器兼容性，閃回以及其他問題。 – cbeer 2010-10-11 17:09:07

你可以舉一個ogg視頻文件的例子url嗎？當我訪問您關聯的網站時，我似乎不會提供一個。 – sdwilsh 2010-10-11 17:12:54

原來它既不是編碼也不是火狐問題 - 它實際上是GoDaddy IIS的問題 - 它們沒有任何Theora MIME類型。

修復使用新MIME創建web.config文件並上傳到託管服務器的根目錄。完美地工作。

來源

2010-12-11 21:28:13 mattelliottIT

是我還是GoDaddy是廢話？ – 2010-12-11 22:06:38

@卡米洛馬丁 - 這是兩個。 – Rob 2010-12-11 22:42:58

@Robòóó· – 2010-12-12 01:49:56

html5視頻和火狐

回答

相關問題