2012-12-10 187 views
0

我想在網上流媒體視頻文件。我的服務器是httpd 2.2 runnin gon centos 5 64位。到目前爲止,它已與ie9,鉻,歌劇,但我與Firefox的問題很好。我不能依靠用戶來安裝某些插件。如果不支持,我希望視頻能夠在html5中播放,然後轉到閃光燈上。以下是我現有的代碼。用html5或閃光燈在Firefox上播放流媒體視頻

<!DOCTYPE html> 
<html> 

<head> 
<SCRIPT type="text/javascript" src="jquery-1.7.2.min.js"></SCRIPT> 
<SCRIPT type="text/javascript" src="modernizr.custom.13466.js"></SCRIPT> 
<script type="text/javascript" src="excanvas.js"></script> 
<script type="text/javascript"> 

function supports_canvas() { 
     return !!document.createElement('canvas').getContext; 
    } 

function supports_video() { 
    console.log("supports video"); 
    console.log(document.createElement('video').canPlayType); 
     return !!document.createElement('video').canPlayType; 
    } 

function supports_h264_baseline_video() { 
     if (!supports_video()) { return false; } 
     var v = document.createElement("video"); 
     return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
    } 


function supports_ogg_theora_video() { 
     if (!supports_video()) { return false; } 
     var v = document.createElement("video"); 
     return v.canPlayType('video/ogg; codecs="theora, vorbis"'); 
    } 

function supports_webm_video() { 
     if (!supports_video()) { return false; } 
     var v = document.createElement("video"); 
     return v.canPlayType('video/webm; codecs="vp8, vorbis"'); 
    } 

</script> 
</head> 

<body> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    /*console.log("document ready"); 
    if (!supports_video()) { 
     console.log("false"); 
     return false; 
    } 
*/ 

    if (Modernizr.canvas) { 
      // let's draw some shapes! 
     } else { 
      // no native canvas support available :(
     } 
}); 
</script> 

    <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> 
    <!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --> 
    <video width="640" height="360" controls> 
     <!-- MP4 must be first for iPad! --> 
     <source src="movie.mp4" type="video/mp4" /> 
     <!-- Safari/iOS video  
     <source src="movie.ogv" type="video/ogg" />--> 
     <!-- Firefox/Opera/Chrome10 --> 
     <!-- fallback to Flash: --> 
     <object width="640" height="360" type="application/x-shockwave-flash" 
      data="movie.swf"> 
      <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> 
      <param name="movie" value="movie.swf" /> 
      <param name="flashvars" 
       value="controlbar=over&amp;image=movie.jpg&amp;file=movie.mp4" /> 
      <!-- fallback image. note the title field below, put the title of the video there --> 
      <img src="movie.jpg" width="640" height="360" alt="__TITLE__" 
       title="No video playback capabilities" /> 
     </object> 
    </video> 
    <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want 
    <p> 
     <strong>Download Video:</strong> Closed Format: <a 
      href="movie.mp4">"MP4"</a> Open Format: <a href="movie.ogv">"Ogg"</a> 
    </p>--> 

</body> 
</html> 

我已經放在.htaccess文件和的httpd的conf以下

AddType video/mp4 mp4 
AddType video/ogg ogg 
AddType video/webm webm 

我還加載了以下內容的httpd在Firefox中,我得到

AddHandler h264-streaming.extensions .mp4 
LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so 

消息:火狐沒有支持格式的視頻

任何建議?

回答

1

Firefox不支持MP4。如果瀏覽器支持HTML5視頻,它將查找它可以播放的文件。如果找不到,那麼它不會自動回退到Flash版本,所以對於Firefox(和Opera - 也不支持MP4),您還需要提供WebM格式(和Ogg if你想支持Firefox 3.6)。

+0

我的代碼不會回退到Flash播放器,如果不是我該如何實現?我遵循本指南http://camendesign.com/code/video_for_everybody – shorif2000

+1

不,如果瀏覽器支持HTML5視頻,那麼它只會嘗試使用它。 Flash後備只適用於不支持HTML5視頻的瀏覽器,例如Internet Explorer 8及以下版本。唯一可以實現這個目標的方法是編寫用於檢測瀏覽器是否支持視頻和播放MP4的JavaScript,如果不支持則使用Flash。或者,使用MediaElement.js(http://mediaelementjs.com/)等許多庫中的一個來爲您做。 –