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).