Computer Corner

July 2012
Why is my Web Browser so slow, and how can I stream a video without using YouTube?

Flood of ads and trackers slow webpages to a crawl
When aggressive websites and advertisers hook into your browser, your online experience can slow to the point of frustration — even uselessness! But the right software and settings, both built-in and add-on, put you back in control.

What to do when ads ruin your Net experience
Recently someone described to me how his favorite sites are being swamped by seemingly unrelated background activity.

"My favorite weather page is WeatherUnderground.com, but lately it's been getting slower and slower to load. What I notice is that after the page appears, a stream of URLs starts flashing across the Status bar at the bottom of my browser screen. I can't write fast enough to list them all, but I see things flashing by such as: ligit, Facebook, pixel, pause, Google, admeld, Twitter, adserver, doubleclick, mookie, radblast, connectixity, tribalfusion, bluekai...well, you get the idea. Waiting for the page to finish loading across my 5Mb DSL connection, the weather has changed by the time I get to read the current forecast. I also used to go to the MSNBC page a lot, but the same thing was happening there, too. I eventually gave up on the site."

Something weird is going on, all right. But I don't think the problem is with those websites themselves. (I visit both regularly and have never noticed anything nefarious or overtly hostile in either.) Rather, I suspect something on your system — most likely, a browser add-in or add-on — is aggressively tracking your online activity in the background. Fortunately, it's easy to slow or even stop that kind of background activity and restore normal browser operation.

First, I'll assume you're running a reputable and up-to-date antivirus/anti-malware tool, and you've recently scanned your system to ensure it's not infected with malware. (If not, consider scanning your system with the free, on-demand Microsoft Safety Scanner and installing the always-on, free Microsoft Security Essentials )

When you're sure your system isn't infected with malware, try resetting your browser. Here’s how to do it with Internet Explorer. This restores all IE's default settings, which are actually pretty good. For example, resetting IE reactivates its built-in popup blocker, restores the SmartScreen hostile-site filter, and removes third-party toolbars, add-ins, plugins, and other such software that can (and often does) mess up browser performance. (Note: A reset will delete stored browser passwords and such. Be prepared to reenter such info from scratch after a full reset.)

It's easy to reset IE with just a few clicks. For IE 8, consult the MS Help & How-to page, "Reset Internet Explorer 8 settings." (IE 9 is also easily reset. The instructions are on its help page. IE 9 also has more and better privacy and security features than IE 8. If you can upgrade to IE 9, I recommend doing so.)

If you use Firefox, see these easy instructions that show how to reset the Firefox Browser. Instructions on how to reset Google Chrome can be found here.

Now create a Restore Point (so you can get back programs you uninstall if you uninstalled them by mistake) and then go into your Windows Control Panel and using “Programs and Features” in Windows Vista and Win 7, or “Add Remove Programs” in Windows XP, uninstall any toolbars such as the “ASK” toolbar” or the “Google Toolbar” or “Yahoo Toolbar”, etc., along with any other programs you do not recognize or use. You do not need any of these toolbars. They don’t add anything to your web experience. They only track your online activity and send it to advertisers while they slow you down.

Once your browser is restored to like-new condition, try using it for a while without making any new settings changes. You might find you really didn't need many or most of the third-party toolbars and add-ons you'd previously installed.

For previous settings or add-ons you wish to restore, carefully add them back in one at a time, so you can see which one(s) are likely responsible for the bad behavior. When you do install such add-ons, read the dialogs carefully and don't allow extra software, toolbars, and such to be installed along with whatever software you've selected!

dnt logoThere are two less common third-party add-ins I allow on all my browsers; the one most pertinent to this discussion is DoNotTrackPlus, aka DNT+. Although the newest versions of all the major browsers offer some level of built-in tracking protection, I find that the relatively new and free DNT+ constantly catches stuff the built-in tools miss.

Ad companies and social networks are tracking everything you do on the web. They know what sites you visit, when you visit them and how often you do...and they know who you are. DNT+ blocks the tracking so you can browse freely and safely. DNT+ is a free tool that puts you back in control of your information. It stops more than 600 trackers and is compatible with Mac or PC for Chrome, Firefox, Safari, and Internet Explorer and it automatically updates to catch new trackers.

I suspect that some of that URL flood you may be seeing flash by on the status bar at the bottom of your browser window is due to exactly the sort of aggressive tracking that DNT+ and similar tools can help prevent.

(Some Do Not Track Plus reports as seen in my Firefox browser.)

The other tool is AdBlock Plus, which I discussed (along with Adfender) in my column last month. Do Not Track Plus stops companies from tracking your activities and habits on the Web and AdBlock or AdFender (use one or the other, not both!) stops ads from appearing in your browser.  Both of these tools speed up your web browsing experience considerably.

The bottom line: Reset, refresh, and simplify your browser setup. Be ruthlessly selective about any add-on software you install, and you'll likely eliminate the strange behavior you're seeing.

drop boxHow to Use Dropbox to Host and Stream Videos
Now here’s something a little more “techie” in nature. If you’re up for it, read on.  Many people have asked me “How can I stream a video on my web site without having to upload it to YouTube?” Dropbox has become synonymous with simple, easy online file sharing. It is platform agnostic and, with its desktop tools, dragging-and-dropping a file is as simple as… well, dragging and dropping it. I use it on all my devices, laptop and desktop computers as well as my iPhone, my wife’s Blackberry phone and our iPads.

What’s not as commonly known is that Dropbox can be used as a content delivery network (CDN). Actually, Web developers have known about this for some time now, using Dropbox to host a certain amount of a site’s content to improve the load performance you would commonly expect from a CDN. As a result, Dropbox had to change its policies to essentially meter the content, especially from free accounts.

What’s even less known is that you can stream video files from your Dropbox account; using HTML5 video tags, you can even embed them on your site. This is a great alternative from uploading them to video sharing sites. You get the benefits of hosting your own content, but without the burden of storage, bandwidth, or poor performance from your own server.

So let me take you on a step-by-step journey of how to use Dropbox as a low-cost video CDN. I’m going to assume you already have Dropbox and that you’ve even been using it to store and transfer files. If you haven’t, first, sign up for an account, then read about how to get started with Dropbox. I’m also going to assume that you know your way around how to encode videos in preparation for Web delivery.

First Encode Your Video
You want to start by encoding your video. Since Dropbox is essentially using HTML5 to stream your video, we want to create a file that’s compatible with HTML5. I prefer using H.264; it has the best compression to quality ratio. If you have the file archived in a format like Final Cut Pro’s ProRes, you can use MPEG Streamclip to transcode the file to H.264. I max my dimensions out at 1280 x 720 for HD content. You can go higher, but that will increase your file size.

If you stream through Dropbox, it will place it into a sized container on its page or, if you embed, you can use any dimensions you choose. The benefit to starting large is if the viewer goes full screen, the video will retain its quality. More on that later.

Once your encoding is complete, place the file into your Dropbox folder. If you haven’t already installed the Dropbox app on your computer, do so now. This allows you to map directly to your Dropbox folders from your desktop. Now you can drag-and-drop files from one location to another with ease. I haven’t done any benchmarking on this, but it seems like file uploads through the app are much faster than through the Web uploader. I uploaded a 100 MB file in a matter of seconds.

Stream from Dropbox
There are two ways to display your content using Dropbox: through a Dropbox webpage, or by embedding the video on your site. The first is the easiest and requires no special coding skills.
To display on a Dropbox webpage, you do the following: Open your Dropbox folder on your desktop and navigate to your video. Right click on the video and you should see a Dropbox drop-down list. Next, click on Get Link. This should launch your browser and take you to the webpage. You can now grab that link and send it out. Whoever has that link will see this page and be able to view your video. There is even an option to download the video.

Embed from Dropbox
The second option requires at least a basic understanding of how HTML embed codes work. It’s not complicated, so don’t be scared off, but it’s also not copy and pasting an embed code from YouTube. You’re essentially creating your own embed code. You start with the following HTML5 code as a template:

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
Now, follow the steps above on getting the link to the video. Then, where you see “movie.mp4,” you’ll want to replace this with that link. For example: https://www.dropbox.com/s/os60r63ogwfl408/your_video_here.mp4.

Next, you’ll want to adjust your width & height. You’ll want to use dimensions that best fit within your site. I use this handy little chart to help me figure out the best size to ensure maximum size compatibility. When you’re all done, your embed code should look something like this:

<video width="512" height="288" controls="controls">
<source src="https://www.dropbox.com/s/os60r63ogwfl408/your_video_here.mp4" type="video/mp4" />
</video>

Now just post this code on your site and you’re good to go. If you wanted to play around with some different features for the embed player, here is a great resource for the different coding options.
And that is how you can use Dropbox as a low-cost video CDN. Do keep in mind that Dropbox does have bandwidth limits, so if you have very popular content, you could hit that ceiling very quickly.

Do you like these ‘tips and tricks’ type columns? If so, take the time to let me know if this column was useful to you. Please keep sending me your suggestions for column topics, along with your own tips and tricks or cool downloads, so I can share them with the Sangat. Just email them to me at guruka@sikhnet.com

Thanks!  - Guruka Singh