I was working with a web page that used the following code to embed videos:

<video width="320" height="240" controls>
   <source src="videos/demo.ogv" type="video/ogg">
</video>

But they weren’t playing in Firefox, Safari or Internet Explorer — only Chrome.

Let’s break down the issues I encountered with each browser and how I solved them.

Issues with Safari

The problem with Safari was that the website was protected with Apache’s basic authentication:

AuthType Basic
AuthName "Password Protected"
AuthUserFile /var/www/domain.com/htdocs/.htpasswd
Require valid-user

To work around that issue, I moved the videos outside of the protected directory. I did this by reusing a virtual host I created a while back for assets i.e. assets.domain.com. Once I moved the videos and updated the HTML5 code:

<video width="320" height="240" controls>
   <source src="http://assets.domain.com/videos/demo.ogv" type="video/ogg">
</video>

The videos played fine in Safari and Chrome.

Issues with Firefox

The problem with Firefox was the following error:

No video with supported format and MIME type found.

A quick search revealed that it was in fact because of a missing MIME type. To test this, I placed a .htaccess file in the web root with the following command in it:

AddType video/ogg .ogv

But it didn’t work. Then I realized that I wasn’t serving the videos from domain.com, but rather, assets.domain.com. So I placed the .htaccess file in the web root of assets.domain.com and now the videos also played in Firefox.

As a side note, if you’ll be serving such files across multiple websites on your server, you should consider adding the MIME at the server level.

Issues with Internet Explorer

Internet Explorer displayed absolutely nothing (not even a video box with an X — more on that later). Turns out, IE9 or less does not support .ogv files. You’ll need an .mp4 version of your videos. Luckily, I was provided with those, so I modified the embed code to:

<video width="320" height="240" controls>
   <source src="http://assets.domain.com/videos/demo.ogv" type="video/ogg">
   <source src="http://assets.domain.com/videos/demo.mp4" type="video/mp4">
</video>

You should also double check that you have the following MIME type already setup:

AddType video/mp4 .mp4

Next I noticed that only one video played. Another quick search online revealed that those videos must use the H.264 codec. Unfortunately, only one of them used it; the others were MPEG-4.

You can easily find out what codec you’re using if you’re on a Mac:

• Right-click on the video.
• Choose Get Info.
• Expand More Info.
• Look under Codecs.

While I was doing this research, I found a neat way to troubleshoot those videos in Internet Explorer.

If you’re on the page with the broken videos:

• Open Internet Explorer’s developer tools (F12).
• Click on the Console tab.
• Type in the following and hit ENTER:
  document.getElementsByTagName("video")[0].error.code
• If the first video on the page is not the video you’re having problems with, increment the index.
• Visit this page for error code details.

That’s it. Once you get your videos converted, you should be good to go.

Issues with testing from a corporate network

In my instance, I was performing these tests from a corporate network. Turns out, all websites were automatically served in compatibility view, meaning that even though the one video had the right codec, it wasn’t playing. This is also why the video box was blank as apposed to showing an X.

I noticed that because of a message in developer tools:

HTML1202: http://domain.com is running in Compatibility View because ‘Display intranet sites in Compatibility View’ is checked.

That was a tricky one, because I almost didn’t see that. The way you can try to get around that is as follows:

• Click on the settings gear toward the top right.
• Choose Internet options.
• Click on the Security tab.
• Click on the Local intranet icon.
• Click on the Sites button.
• Click on the Advanced button.
• Select the appropriate website and click Remove.
• Don’t forget to put that entry back later. :)

I should point out that your changes may not be saved, depending on the network policy. It’s also a very good idea to check with your help desk, since this is a legitimate requirement, and therefore they may be able to offer an alternative such as creating a local computer account.

If you have any questions about any of the troubleshooting steps I wrote about, feel free to ask in the comments below.

Featured image by Jeremy Bezanger.

Comments (2)

Previously posted in WordPress and transferred to Ghost.

Gary
July 3, 2013 at 12:29 am

Hi Ryan, this is very useful info. I’m really struggling to find a “universal” way to play audio and video on my site. I have a self-study course that teaches people to read Thai. I’m using HTML5 audio/video tags. The problem is that whichever format I choose, there’s always some browser or device that doesn’t support it.

iPad/iPhone is probably the worse – and although I’d love to find a way to make my course available on these devices without developing a separate app, I’m not sure whether it’ll be possible without locking out all the other browsers and devices.

I tried MP3/MP4 initially, but so many of my customers use Firefox. Now I’m using Ogg (even though Internet Explorer doesn’t support it). And that means that other customers are locked out from using my site also – unless they install Firefox or Chrome. I’m not sure about Safari because Ogg isn’t officially supported, but some people say they can play my videos on their version of Safari (maybe they have some kind of addin installed).

The trouble with your solution to load both MP4 and OGV files is:

1. It seems to double the download time for playing the videos – which are already quite large and sometimes require 15-20 seconds on a slow connection before they start to play. I can’t afford to slow down the experience any further.

2. Chrome supports MP3 and Ogg, so it plays both files simultaneously, with a slight echo or reverb effect.

Do you have any further ideas on how to resolve this?

Many thanks in advance,
Gary

Ryan Sechrest
July 11, 2013 at 8:36 am

The hard part is that no one solution fits all, which means unless you are using a video service like Vimeo or YouTube, or a third-party player that has browser detection, like JW Player, you’ll have to have several solutions in place to ensure all browsers can play your videos. With regard to Chrome, providing multiple source files should *not* play them all at once, but rather, the browser should pick the one that will work the best — are you sure it’s playing both? I did a quick search online and didn’t see anyone else having this issue.