2012-12-10 2 views
0

웹에서 비디오 파일을 스트리밍하려고합니다. 내 서버는 httpd 2.2 runnin gon centos 5 64 비트입니다. 지금까지 그것은 ie9, 크롬, 오페라와 잘 작동했지만 파이어 폭스와 관련된 문제가 있습니다. 특정 플러그인을 설치하도록 사용자에게 의지 할 수는 없습니다. 비디오가 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로 파일 및 아파치의 conf에 다음에 놓여있다가

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

나는 또한 내가 얻을 파이어 폭스에서

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

메시지 아파치로되어 다음로드 한 지원되는 형식의 동영상 없음

모두 제안?

답변

1

Firefox는 MP4를 지원하지 않습니다. 브라우저가 HTML5 비디오를 지원하면 재생할 수있는 파일을 찾습니다. 찾지 못하면 자동으로 Flash 버전으로 전환되지 않으므로 Firefox (및 MP4도 지원하지 않는 Opera)의 경우 WebM 형식 (및 Ogg if Firefox 3.6을 지원하고 싶습니다.)

+0

내 코드가 플래시 플레이어로 되돌아 가지 않는 경우 어떻게해야합니까? 이 가이드 http://camendesign.com/code/video_for_everybody을 따라했습니다. – shorif2000

+1

아니요, 브라우저에서 HTML5 비디오를 지원하는 경우에만 사용하려고합니다. 플래시 폴백은 Internet Explorer 8 이하와 같은 HTML5 비디오를 지원하지 않는 브라우저에서만 발생합니다. 이를 달성 할 수있는 유일한 방법은 브라우저가 비디오를 지원하고 MP4를 재생하는지 여부를 감지하고 그렇지 않은 경우 Flash를 사용하는 JavaScript를 작성하는 것입니다. 또는 MediaElement.js (http://mediaelementjs.com/)와 같은 많은 라이브러리 중 하나를 사용하여 대신 사용할 수 있습니다. –

관련 문제