Fixing broken video, audio, & fonts and configuring your server to correctly serve content under the correct content-type

hosting
svg

#1

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:

  1. Open Terminal
  2. Type
    curl -I http://example.com/video.ogv
    Where http://example.com/video.ogv is the absolute URL of your video and press return.
  3. Terminal may output this text:
  4. 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’:

  1. Create a file called htaccess.txt on your desktop using ‘TextEdit’. Before you edit it, click Format > Make Plain text.

  2. 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 .webm

    Add 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:


Flickering image buttons in Safari
Browser loads hype script, but won't play video
PastedVector.svg wrong MIME type
Video in Safari 8.x?
IE11 video error
Sound in Wordpress
Help Adding a custom font
Audio Playback issue with FF?
Images appear when previewing locally but not on previewing from a server
No sound for hype in Wordpress post
Knowledge base: Guides from the Tumult Team
Images appear when previewing locally but not on previewing from a server
(»mopsfidel«) #2

Hi, any plans for also integrating »OpenH264« ?
It’s backed by Cisco. Maybe another alternative.

Regards, Chris


#4

I wasn’t able to find much browser support for that codec besides Firefox http://andreasgal.com/2014/10/14/openh264-now-in-firefox/, but we’ll definitely keep it on our radar.


(Alex) #5

Hi @Daniel

I met headache issue which is quite similar with this issue in your post.

After first time SSL setup on our server, the videos play well in both Firefox and Chrome, but it does not play in Safari. and I supposed this issue is related to Intermediate Certificate from the post at

and we already discussed before, and here is your reply to me How to allow embed external videos in Hype animation on SSl site?

Today, we reinstalled wildcard SSL, and it seems works fine, you may check at

https://www.sslshopper.com/ssl-checker.html#hostname=www.lovcour.com

but the video still does not play in Safari, please check the video post at https://www.lovcour.com/archives/526

I already used several plugins like Really Simple SSL ( https://wordpress.org/plugins/really-simple-ssl/) to fix mixed content, but the video issue still can not resolved.

Anyway to resolve please?

Alex lee


(Alex) #6

@Daniel

Here is the issue screenshot: http://prntscr.com/jdok34

Is there a way to set for nginx please?

Alex