Tag Archives: Safari

Using the HTML5 video player for serving .ogv files in Firefox and Safari, and .mp4 files in Internet Explorer

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

1
2
3
<video width="320" height="240" controls>
   <source src="videos/demo.ogv" type="video/ogg">
</video>
<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:

1
2
3
4
AuthType Basic
AuthName "Password Protected"
AuthUserFile /var/www/domain.com/htdocs/.htpasswd
Require valid-user
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:

1
2
3
<video width="320" height="240" controls>
   <source src="http://assets.domain.com/videos/demo.ogv" type="video/ogg">
</video>
<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:

1
AddType video/ogg .ogv
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:

1
2
3
4
<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>
<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:

1
AddType video/mp4 .mp4
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.