You can greatly increase the accessibility of your HTML5 videos if you add text captions to them.  Doing so would enable visitors with hearing disabilities to enjoy your video content.

There are several ways of adding captions to videos, but I will detail one of the simplest.  A few things to keep in mind are:

• This method is for HTML5 video only
• It uses javascript
• It is time consuming

That being said, let’s get on with this.

Transcribe the video

The first step is where most of your time will be spent.  You will need to transcribe (make a written copy of the spoken words) your video and write it out in a special way.  When I say “special way”, I mean that you will have to take the spoken words in your video and list it with timestamps so the browser knows when to display the captions.

To encode the caption to display at the correct time in your video, you have to set a start time and an end time.  These times are measured in seconds, and will look like this:

<span data-begin="7" data-end="12">Umm, you see, yeah we... we didn't budget for this.</span>

Continue doing this until you have gone through your entire video.

Enclose the captions in a div tag

Once you have your entire video transcribed properly, enclose all the lines of code in a div tag with the id of “transcript” like so:

<div id="transcript">
<p>
<span data-begin="0.5" data-end="1">Hi</span>
<span data-begin="1" data-end="3">Is there a problem, sir?</span>
<span data-begin="3" data-end="6">Uh, yes. Umm, a quick question about the final toll.</span>
<span data-begin="6" data-end="7">Yes</span>
<span data-begin="7" data-end="12">Umm, you see, yeah we... we didn't budget for this.</span>
</p>
</div>

Add some javascript

You will need to add a little javascript to the “head” section of your webpage.  This javascript snippet helps make the magic of captioning possible.  The code is as follows:

<script type="text/javascript">
(function(_global) {
	var captions = [];
	var video;
	var output;
	var caplen;

	window.addEventListener('load', function() {
		output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
		output.id = 'caption'; // it has an id of caption
		video = document.querySelector('video'); // and it's after the first video element
		video.parentNode.insertBefore(output, video.nextSibling);
		getCaptions();
		video.addEventListener('timeupdate', timeupdate, false);
	}, false);

	// function to populate the 'captions' array
	function getCaptions() {
		captions = []; // empty the captions array
		var nodes = document.querySelectorAll('#transcript span');
		var node = "";
		var caption = "";
		for (var i = 0, node; node = nodes[i]; i++) {
			caption = {'start': parseFloat(node.getAttribute('data-begin')), // get start time
				'end': parseFloat(node.getAttribute('data-end')), // and end time
				'text': node.textContent};
			captions.push(caption); // and all the captions into an array
		}
		caplen = captions.length;
	}

	function timeupdate() {
		var now = video.currentTime; // how soon is now?
		var text = "", cap = "";
		for (var i = 0; i < caplen; i++) {
			cap = captions[i];
			if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
				text = cap.text; // yes? then load it into a variable called text
				break;
			}
		}
		output.innerHTML = text; // and put contents of text into caption div
	}

	// hide transcript div when scripting is enabled
	document.write('<style>#transcript{display:none}</style>');
})(this);

</script>

Add some CSS

After doing all this, you will then need to add some styling rules to position your captions and to make them look nice.  The style rules I added are as follows:

#transcript span {display:table-row;}
#transcript [data-begin]:before {content: " [" attr(data-begin) "s-" attr(data-end)"s]   "; font-size:80%; display:table-cell; padding-right:0;}
#caption { position: absolute; width: 640px; bottom:30px; left: 0; text-align: center; font-family: sans-serif; font-weight: bold; color: white; text-shadow: black 1px 1px 3px; padding-bottom: .5em; }

You will need to have your HTML5 video enclosed in a div tag with the property of “position: relative” as well.

Add your video and captions to your page

The final step is to add your HTML5 video along with your caption code to your webpage.  I use Universal Video to embed HTML5 videos on my site, so after typing in the shortcode I would add the caption code directly beneath the shortcode in my post editor.

If everything was done correctly, your output should work like the video below (which happens to be the popular “The Vendor Client Relationship“).

Note: These captions only work on HTML5 video if the visitor has javascript enabled.  If a visitor comes to your website with javascript turned off, the transcript will appear in its entirety below the video.

No related posts.

It is becoming more and more common for a website to appear differently on a mobile device as compared to what it looks like on a desktop computer or laptop. Here are how the top 50 blogs according to Technorati compare.

There are two images for each website: the left image is as it appears on a desktop computer, and the right image is how it appeared on a mobile phone. And in case you are wondering, the phone used for the mobile images was a Sanyo Zio running Android. (Click images for larger view).

1. The Huffington Post

2. TechCrunch

3. Mashable!

4. Think Progress

5. TMZ

6. Engadget

7. Gawker

8. Gizmodo

9. Boing Boing

10. Business Insider

No related posts.

How are you including videos on your website?  Are you still using flash to embed them or have you switched to html5?

With the state of the internet today it makes sense to use the video playback features already included in modern web browsers and revert to flash playback only when necessary.  This is true for several reasons.

First, people watching flash videos must have a flash plugin installed to watch videos, but html5 does not require users to install any browser plugins to watch videos.  Removing additional requirements of video playback not only streamlines the process, it also lessens the workload on your CPU.

Secondly, and probably the most important, millions of mobile devices are blocked from using flash in any form.  This means that anyone using a device such as the iPad will never see a video if it is in flash format.  But html5 videos are viewable without a hitch on these devices.  Mobile internet devices are one of the fastest growing industries, so content providers are going to need to adapt to this arena as well as the normal desktop territory.

While html5 video has its advantages, there are still weaknesses to this new way of doing things.

The main drawback to using html5 video is the lack of a viable fullscreen option.  Watching an online flash video in fullscreen is nothing out of the ordinary, but not an option yet in html5.  Well, you can watch html5 video in fullscreen with the latest version of Firefox, but the framerate is remarkably reduced which results in a very “choppy” video.

So if you can handle the lack of fullscreen playback, then there really is no reason to use flash for videos except as a fallback method for browsers that don’t yet support html5 video.

If you don’t use html5 video on your site, what is holding you back?

No related posts.

I don’t spend a lot of time worrying about whether or not my website’s code is valid or not.  And by valid, I mean if it conforms to the W3C standards or not.

Sure, I try to always use the proper markup when creating sites, but even if I slip up a time or two, it probably won’t make a difference in the final product.  And if it does, then it is quickly fixed and I move on.

I have met people who are pretty fanatical about insisting that their website contain no validation errors.  I have heard some of them say that websites rank better in the search engine if they validate properly.  I partially disagree.

Having a 100% W3C compliant website will not improve your search rankings.  And most of the time having a website with validation errors will not hurt your search rankings either.  The only time a validation error will harm your website is if that error keeps the search engines from indexing your content.

Let me say that again, because it is a point worth driving home:

The only time a validation error will harm your website is if that error keeps the search engines from indexing your content.

Most coding errors in a website are really minor things.  You never notice them because most modern browsers are able to auto-correct most of them.  Search engines will not penalize your site because of these minor mistakes; they drop the hammer only on more serious slip-ups.

Let me provide a good example of what I’m talking about.  Two of the top websites relating to SEO are seomoz.org and seobook.com.  You can search Google for “SEO” and you will find both sites in the top 10 results.  Now let’s check to see how compliant they are (according to the W3C Validator):

• Seomoz.org contains 40 errors and 5 warnings
• Seobook.com contains 183 errors and 67 warnings

If W3C validation was crucial to search engine ranking, don’t you think these titans of the SEO industry would be on the forefront of perfection?

My suggestion would be to worry less on things that really don’t matter and focus more of your time on things that do.

No related posts.

I was approached by Mohammed from msafi.com and he thought that this article he wrote might be of use to readers of this blog. I agreed with him and decided to republish it here. You can find the original publication here

Most people just accept the default, out-of-box layout of blogs even though they know it is not optimal for the nature of their blog. I’m not the first to say that blog navigation is a nightmare.

Why is that?

The main problem with blog navigation is that the content is not interlinked properly. That’s especially true for generic blogs that aren’t about one single topic.

When a visitor lands on your generic blog, they’re probably interested in only one of the topics that you cover. Say that topic is dogs. Even though all of your dog posts are grouped by “tags” and “categories”, your blog sidebar is probably distracting the visitor with links to other unrelated content about cycling, rock climbing or whatever else you write about.

Don’t distract your readers.

Give your readers only what they’re interested in at that moment and help them find more of it. Doing that will make your visitors stick around longer, browse more pages, and even improve your SEO!

Here’s how you can achieve that.

Clean Up Your Sidebars

On your post pages, you don’t have to tell the reader about all the categories and tags that you write about. Why would you clutter your sidebar with such information?

A list of categories and a tag cloud are useful information on the homepage because they give your reader an overview of the things that you write about. So, you can put those on the sidebar of the homepage, but not the sidebar of posts pages.

The problem is that most WordPress themes don’t separate the site-wide sidebar from the post sidebar. It is, however, essential to have a separate sidebar for posts if you’re serious about improving the navigation and layout of your blog. If your theme has a single sidebar for everything, read this post to learn how to give your posts their own sidebar.

Ideas for Relevant Content to Put on Your Posts Sidebar

The more a Web page is focused on a single topic and the more links to other related Web pages it has, the more search engine optimization weight it’ll carry for that topic. Making your sidebar relevant to the topic of the post itself will have huge benefits for your blog. Here are some ideas of the relevant content put on your sidebar:

• Related links to other posts on the same topic on your blog
• A list of categories that the post belongs to
• A list of tags that the post belongs to
• RSS feed for the categories and tags that the post belongs to

Use a Related Posts Plugin

Perhaps the best thing you could do to improve the navigation of your blog is to use a related posts plugin. The most popular plugin for this function is Yet Another Related Posts Plugin (YARPP).

Read this post to learn how you can put links to related posts on your sidebar using YARPP.

I hope you found these tips helpful. If you have any questions, comments, or suggestions on what else can be done to improve navigation, post them below!

No related posts.