使用html5或flash在Firefox上播放流媒体视频 [英] Play streaming videos on firefox with html5 or flash
本文介绍了使用html5或flash在Firefox上播放流媒体视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< SCRIPT type =text / javascriptsrc =jquery-1.7.2.min.js>< / SCRIPT>
< SCRIPT type =text / javascriptsrc =modernizr.custom.13466.js>< / SCRIPT>
< script type =text / javascriptsrc =excanvas.js>< / script>
< script type =text / javascript>
函数supports_canvas（）{
return !! document.createElement（'canvas'）。getContext;
函数supports_video（）{
console.log（supports video）;
console.log（document.createElement（'video'）。canPlayType）;
return !! document.createElement（'video'）。canPlayType;
函数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'）;
函数supports_ogg_theora_video（）{
if（！supports_video（））{return false; }
var v = document.createElement（video）;
return v.canPlayType（'video / ogg; codecs =theora，vorbis'）;
函数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）;
返回false;
}
* /
if（Modernizr.canvas）{
//让我们画一些形状！
} else {
//不支持原生画布：
$ b ; - 首先尝试HTML5播放：如果用作XML，则将`controls`扩展为`controls =controls`并自动播放 - >
<！ - 警告：播放在iOS3上不起作用如果您包含海报属性！固定在iOS4.0 - >
< video width =640height =360controls>
<！ ！ - >
< source src =movie.mp4type =video / mp4/>
<！ - Safari / iOS video
< source src =movie.ogvtype =video / ogg/> - >
<！ - Firefox / Opera / Chrome1 0 - >
<！ - 回退到Flash： - >
< object width =640height =360type =application / x-shockwave-flash
data =movie.swf>
<！ - Firefox使用上面的`data`属性，IE / Safari使用下面的参数 - >
< param name =movievalue =movie.swf/>
value =controlbar = over& amp; amp; image = movie.jpg& amp; amp; amp; file = movie.mp4/>
<！ - 备用图片。注意下面的标题字段，把视频的标题放在那里 - >
< img src =movie.jpgwidth =640height =360alt =__ TITLE__
title =无视频播放功能/>
< / object>
< / video>
<！ - 你*必须*提供一个下载链接，因为他们可以在本地播放这个文件。自定义这一点你想要的
< p>
< strong>下载视频：< / strong>已关闭的格式：< a
href =movie.mp4>MP4< / a>打开格式：< a href =movie.ogv>Ogg< / a>
< / p> - >
< / body>
< / html>
我在.htaccess文件和httpd conf中放置了以下内容：
AddType video / mp4 mp4
AddType video / ogg
AddType video / webm webm
我也将以下内容加载到httpd中：
$ p $ AddHandler h264-streaming.extensions .mp4
LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so
firefox中的消息是： firefox没有支持格式的视频
有什么建议吗？
解决方案
Firefox不支持MP4。如果浏览器支持HTML5视频，它将查找它可以播放的文件。如果找不到，就不会自动回到Flash版本，所以对于Firefox（和Opera--也不支持MP4），你还需要提供一个WebM格式（和Ogg if你想支持Firefox 3.6）。
I am trying to stream video file on web. my server is httpd 2.2 runnin gon centos 5 64 bit. So far it has worked well with ie9, chrome, opera but I have issues with firefox. I cannot rely on a user to have certain plugins installed. I want the video to be able to play in html5 if not supported then roll onto flash. The following is the current code that I have.
<!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&image=movie.jpg&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>
I have placed the following in .htaccess file and httpd conf
AddType video/mp4 mp4
AddType video/ogg ogg
AddType video/webm webm
I have also loaded the following into httpd
AddHandler h264-streaming.extensions .mp4
LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so
Message in firefox i get is: firefox no video with supported format
Any suggestions?
解决方案
Firefox doesn't support MP4. If a browser supports HTML5 video, it will look for a file it can play. If it can't find one, it does not then fall back to the Flash version automatically, so for Firefox (and Opera - which also doesn't support MP4), you'll need to also provide a WebM format (and Ogg if you want to support Firefox 3.6).
这篇关于使用html5或flash在Firefox上播放流媒体视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
