HTML5 video, ogv, firefox and nginx
If you are having problems serving ogv
video content on Firefox there are some steps that you should follow.
Serving ogg files with the correct MIME type
First you have to ensure that you are serving the correct mime type
for ogv
files, it should be video/ogg
you can test it using web sniffer (see the return value in the Content-Type: tag, you should see video/ogg
)
If not try adding the following mime types
to your nginx
(eg: /etc/nginx/mime.types`) and restart it.
video/ogg ogm;
video/ogg ogv;
video/ogg ogg;
Handle HTTP 1.1 byte range requests and serving X-Content-Duration
headers
Firefox or better yet the Gecko engine that powers Firefox / Thunderbird / SeaMonkey and others uses a sequence of HTTP 1.1 byte-range requests to retrieve the media from the seek target position in order to determine the duration of the media, it does this because ogv files don't contain the duration of the animation, so in order to determinate the duration of the file it retrieves a 8k chuck in the beginning of the file to determinate if the file is a valid ogg file, than based on the Content-Length header sent from the server it asks for the last chuck as you can see here, and finally it resumes the download from the first chuck as you can see in this image.
In order to reduce the amount of requests made to your web server you can send the X-Content-Duration
header with the duration in seconds of the media. If your video has a duration of 1 minute and 32.6 seconds you should server the value as 92.6
X-Content-Duration: 92.6
Here is example how you can serve a media file using nginx
location /media/video.ogv {
add_header X-Content-Duration "92.6";
}
If you're curious to see in greater detail why Gecko makes some of the HTTP requests it does, read comment 1 of bug 502894.
Consider using preload
attribute
The HTML5 video
and audio
tags provide the preload
attribute which tell Gecko to attempt to download the entire media when the page loads. Without the preload
attribute Gecko only downloads enough of the media to display the first video frame and determinate the media's duration.
preload
if off by default so to enable just add the attribute to the video tag and set it's value to auto.
<video preload="auto">
<source src="media/video.ogv" type="video/ogg" />
</video>
Comments