When viewing media on the web, browsers required a ‘Content Type’ header to correctly determine the file format of the file being shown. Some web hosts do not set content headers for videos and audio, especially newer video formats such as .ogv files. This is also true sometimes for the SVG file format.
Fixing Mime-type issues on an Apache Server
Odds are, you’re running an Apache server to host your web content. Are you seeing this in Firefox?
You may be experiencing this issue if:
- Firefox cannot play a video (even if it has the three video formats required for cross-browser playback)
- A video loaded on an iOS device has a white slash over the play button (If you see this, first make sure you correctly encoded this video as .h264 / MP4 using QuickTime or an application like Miro Video Converter).
Here’s how to tell if the .ogv file type (which Firefox needs) or the .mp4 file type (used by many other browsers) is set correctly on your web host:
- Open Terminal
- Type
curl -I http://example.com/video.ogv
Where http://example.com/video.ogv is the absolute URL of your video and press return. - Terminal may output this text:
- If you see a Content-Type value of ‘text/plain’ (the last line) and your ‘Server’ is Apache then your server is not correctly serving the video file. If you do not see ‘Apache’ in the server field, refer your hosting provider to this article so they can serve the mime-type correctly.
To fix this issue if you see ‘text/plain’ in the test above and your server type is ‘Apache’:
-
Create a file called htaccess.txt on your desktop using ‘TextEdit’. Before you edit it, click Format > Make Plain text.
-
Add the following code to that file
Add correct content-type for audio and video
AddType video/ogg .ogv
AddType audio/ogg .ogg
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webmAdd correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg
Upload that file to your Hype resources folder with your FTP program. Once it has been uploaded, rename the file to:
.htaccess
This file is also here:
htaccess.txt.zip (2.3 KB)
Depending on your FTP transfer program, this renamed file may become invisible once you rename it to .htaccess. If so, see if you can turn ‘show invisible files’ in your FTP program to on. The .htaccess file affects all files at or below the current folder level. You may also download this file, which resolves a number of issues on older web servers.
Please see this ticket for an explanation of the issue on Mozilla’s bug tracker.
Amazon Web Services
When uploading content to an S3 bucket, you’ll need to manually set the Mime-type. Programs like Transmit make this easy. Here’s how to set the mime types for the three video formats required for browser compatibility. This option can be found in the ‘Cloud’ pane of Preferences:
Once you have set that up and uploaded your content, you can test by running the following command in the ‘Terminal’ application:
curl -I https://s3.amazonaws.com/test/hype-video-test/what-is-a-scenario-frame.hyperesources/what-scenario-1a.mp4
HTTP/1.1 200 OK
x-amz-id-2: 30a0rCck47ntYT6Td9uzf3VRaCkmlyv/rN8Fqpa4mkcjg3Mm/JfQvy7P+dOrCGTk
x-amz-request-id: 4C8734C77817C9B1
Date: Wed, 22 Jan 2014 21:07:59 GMT
Last-Modified: Wed, 22 Jan 2014 18:51:09 GMT
ETag: "b489aacadfd85f5bd70abfc8711ff394"
Accept-Ranges: bytes
Content-Type: application/octet-stream
Content-Length: 421542
Server: AmazonS3
If you see the ‘Content-type’ for a video or audio element set as Octet stream, you may have missed a step.
For more content types, view this page: