Tag Archives: Firefox

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="https://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="https://assets.domain.com/videos/demo.ogv" type="video/ogg">
   <source src="https://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.

Change Firefox’s update release channel from esr to release

I noticed today that my Secunia PSI was reporting that Firefox 11.0 was outdated. I went to Firefox > About to check on that, but it was reporting that it was up to date. That’s when I noticed I was on the “esr” update channel, which is odd, because all the other Firefox installs I have on other computers are set to the “release” update channel. A quick Google search showed that there wasn’t a user-friendly way to change this, but it was nevertheless pretty straightforward.

The easiest way to change it is to browse to the following folder on your Windows computer: <installation directory>\defaults\pref. Your installation directory will most likely be either Program Files or Program Files (x86). By the way, make sure Firefox is completely closed before doing this.

In that folder is a file called channel-prefs.js. Copy that file to your Desktop (select the file, press CTRL+C, go to your Desktop and press CTRL+V). Now open it with Notepad, which you can do by right-clicking on it, choosing open with, and then selecting Notepad.

Change the second line from:

pref("app.update.channel", "esr");

to:

pref("app.update.channel", "release");

Now save the file and close Notepad. Select the file on your Desktop and cut it (CTRL+X), then go back to your pref folder and press CTRL+V. Windows will ask you to confirm this, just press Continue.

Next time you launch Firefox and go back to Firefox > About, you’ll see that you’re now on the “release” update channel and it will start downloading Firefox 12.0.

Let me know if you have any questions or problems!

PS: If you’ve read to use about:config to change the update release channel, this is deprecated and will no longer work.

Top 3 Firefox add-ons for security enthusiasts in 2012

Security is time consuming and often just plain inconvenient, but there are a handful of plugins that make being secure much easier. I give you the top 3 security add-ons for Firefox that I personally use.

(PS: In terms of ratings, 1/5 refers to the least and 5/5 to the most.)

1. HTTPS Everywhere

Easy of use: 5/5, Convenience: 5/5

This plugins basically has a list of popular sites programmed in it, such as Facebook, Twitter, Google, etc. that offer a secure https connection. Whenever you visit one of those sites, it forces Firefox to use the secure connection instead of the standard (http) one. Https is a protocol that encrypts data between you and the website you’re interacting with. If you were wondering what the little “s” after http stands for, the answer is “secure” 🙂 .

The only note I have about this is that one of the websites on that list is Netflix, and even though Netflix supports logging in securely, it doesn’t properly work when trying to manage your queue, so you may have to disable it just for that site. Other sites may exhibit problems as well, but I haven’t come across any of them yet.

2. NoScript

Easy of use: 4/5, Convenience: 3/5

This plugin is a lifesaver. Most malicious things on a website, whether it’s a fake security warning that your PC is infected or something that tries to hijack your browser, are created by using scripts, or more specifically, JavaScript. This add-on basically prevents all scripts from executing without explicit permission from you. The problem is, most websites use and rely on scripts. Scripts in themselves aren’t dangerous at all, they are quite useful, it just depends on what they do. So blocking all scripts on all websites is not the solution.

The purpose of the add-on is to block them by default and then you specifically allow the scripts you need. This sounds very complicated and it is at first, but after a while you’ll be able to recognize what seems legitimate and what not. My approach is this: I try to use a website the best I can without scripts. If something doesn’t work, I enable the most obvious ones first. If I’m on Yahoo!’s website for example, I’ll enable scripts from yahoo.com first, then try it again, and if it still doesn’t work, I’ll enable other scripts. I’ll probably have to create another post down the road that explains what the “other scripts” are in more detail.

In it’s most simplest form, if you don’ know anything about scripts, enable them all on the sites you trust, however, often you’ll find yourself googling a topic of interest and you may visit many unfamiliar and untrusted websites when following those search results. For those sites, always block all scripts. If the site doesn’t come up or something looks weird, leave the site and try another result.

3. Web of Trust (WOT)

Easy of use: 5/5, Convenience: 5/5

How great would it be to know whether a website is dangerous or not before you visit it? Imagine a little circle next to all links that could have one of three colors: green (this website is safe), yellow (this website may be suspicious), and red (this website is dangerous). Would be awesome, right? Well, someone’s thought of that.

I give you the Web of Trust add-on. That’s exactly what it does. With it installed, for example, you’ll see little colored circles on all the links in a Google search result and that will tell you whether you should go to that website or not. On top of that, even if you click on a website that doesn’t have a circle and it was rated dangerously or maybe it was red and you accidentally clicked it, an intermediate screen will appear asking you to confirm whether you really want to visit that website or not. The great thing is that WOT is community based, so it takes other people’s reviews in consideration when rating websites.

Sometimes sites aren’t rated (like this one here), which is indicated by a gray circle and a question mark. It’s up to you whether you want to visit it or try another site.

There you have it, the 3 best add-ons for Firefox in terms of security. If I missed something or there’s another great add-on you can recommend, leave it in the comments below.

5 best Firefox add-ons for web developers in 2012

The only things I ever recommend are things that I use myself and that have proven themselves over time. I’ve used the following add-ons at least weekly, if not daily, throughout 2011, which is how they’ve landed on my list of top 5 Firefox add-ons for 2012.

1. ColorZilla

Purpose: This add-on adds a little eyedropper icon after your Firefox search bar. If you click it, you can sample any color on a webpage.

Usage: I use it to sample a color on a webpage and it automatically copies the hex value so I can use it in a stylesheet (CSS) file.

2. Firebug

Purpose: To inspect HTML, CSS, and JavaScript code on a webpage, view any connections that are initiated and their response, and see the variables currently loaded in the DOM. You can activate the window via the F12 key (Windows).

Usage: I mostly use it to inspect and manipulate elements on a webpage. For example, right-click anywhere and select “Inspect element”. Firebug will jump right to the code and you can alter the HTML on the left and the CSS on the right. This makes tweaking styles and duplicating content very easy. Furthermore, I use it to monitor AJAX responses on the “Net” tab, which tells me whether I get the expected results or not.

3. FireShot

Purpose: To take screenshots of a full, partial, or custom area on a webpage.

Usage: Often I’m asked to show a demo of a webpage in a meeting or perhaps a client is asking for it via email. FireShot adds a little bar in the status bar of Firefox, which gives me an icon to select either a full page screenshot (from top to bottom), a partial screenshot (anything that’s viewable without scrolling), or I can drag a custom rectangle over the area I want. I can then save the image or copy it to my clipboard.

4. Web Developer

Purpose: It lets you modify how your webpage will be rendered in your browser and provides tools to work with images and elements on a webpage.

Usage: This add-on does a lot, but I only use a subset of features. I use it for turning off JavaScript on a webapge (Disable > JavaScript > All), deleting or disabling cookies (Cookies > Disable Cookies > All Cookies), getting a div’s size (Information > Display Element Information… click on a page element), and to measure something on a webpage (Miscellaneous > Display Ruler… click and drag with mouse to create a box).

5. WorldIP

Purpose: Displays server’s location, IP address, provider, and your IP address.

Usage: I work with many different servers at a time and sometimes I move websites around. This little add-on tells me where the current website is located, its IP address, and who it’s hosted with. When I’m not using it for my stuff, I just find it interesting to see where everyone hosts their website 🙂 .

There you have it, the 5 best Firefox add-ons for me in 2012. If you have something you use a lot that makes your life easier, feel free to share it in the comments below.

Firefox 9 uses significantly less memory

I received an update for Firefox 9 today and I’m very pleased with its improved memory (RAM) management. Firefox used an average of 600,000 K for about ten open tabs, however, since the new release of version 9, we’re now down to an average of 200,000 K. I’m not even interested to see what other improvements they made, because quite frankly, this is the big one I’ve been waiting for. So, if you are like me and have dabbled in other browsers, such as Chrome, Opera, etc. since then, it’s safe to say that Firefox is back!

Here are some of the memory related bugs that were fixed:

  • 669815 Type inference uses too much memory
  • 646913 Massive memory usage when viewing www.cnn.com
  • 678997 memory leak in widget/src/android/AndroidBridge.cpp
  • 148636 Enormous memory usage rendering with lots of form elements
  • 124608 Imagelib memory usage issues
  • 503108 Memory usage climbs slowly but continuously on downloadstats.mozilla.com