sonofbluerobotFront-End Engineering With Standards

Archive for the ‘javascript’ Category

Safari iOS Specs Unobtrusive JavaScript Reminder

Posted on: by j.albert.bowden.iiNo Comments

Recently I was digging around in the Safari Developer Library when I came across one more reason (as if there weren’t enough) to write Unobtrusive JavaScript. In this case, Safari on iOS (all devices) disables preload="" and autoplay="", in case the user may be in a position where they are on a horrid network and are being charged per data unit. So no data is actually loaded until initated by the user; this also implies that the play() and the load() methods are inactive until user initiated playback, unless the play() or load() method is triggered via user action. So in laymens terms, user-initiated Play buttons work, however the onload="play()" event does not. Safari Developer Library provided the solution below:

The example below does nothing in iOS:


<body onload="document.myMovie.play()">

The example below will play the media in iOS:


<input type="button" value="Play" onclick="document.myMovie.play()">

This works as-is, however the event handler is still mixed in with the markup thus violating the Seven Rules of Unobtrusive JavaScript, specifically number five:

5. Understand Events (Event handling to initiate change)

Event handling is the next step to truly Unobtrusive JavaScript…understand that Event Handling is true separation.

Seven Rules of Unobtrusive JavaScript

So I rewrote the Safari solution using Web Standards and separated behavior (JavaScript) from structure (html) using Unobtrusive JavaScript. I don’t have any video files available for the demo so I swapped audio in its place, as well as added some updated (read: “proper”) markup, but the principle(s) are not lost. The demo is a media control that will play a media file after user-initiated contact with the play button. You can view the demo here or view the code and markup below:


// javascript
window.onload = function() {
// Get the play button and append the audio play method to on click
  var audio = document.getElementById("audiosrc");
  var play = document.getElementById('play');
  play.addEventListener('click', function(){
  audio.play(); }, false);
}
<!-- html -->
<button type="button" id="play">
  <audio id="audiosrc">
    <source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.ogg" />
    <source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.mp3" />
    <source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.wav" />
  </audio>
</button>

Embrace Accessibility, Gain Market Growth via Universal Subtitles

Posted on: by j.albert.bowden.iiNo Comments
Universal Subtitles

Universal Subtitles is an easy way to, you guessed it, add subtitles/captions to your videos. With an intuitive interface that guides you through 3 minimal steps, Universal Subtitles is incredibly easy to use. Actually it’s only downfall is that it’s JavaScript based, and there is no fallback if users are running without. Not having a non-JavaScript fallback is a major red flag for any client-side solution, don’t ever forget that. That said, its a great first step to adding Accessibility into your content, while also furthering your content’s reach and possibly getting user/community involvement.

By adding subtitles/captions to your videos, you are adding a layer of Accessibility to your content. In laymens terms, people with hearing disabilities have no clue what your video(s) are trying to get across to them. Congratulations, you have just added the equivalent to a handicapped-accessible entrance to your video’s content. Naysayers dismiss this percentage of web users, the same way they dismiss the non-JavaScript percentage: at such a small number, who cares right? Wrong. This is the World Wide Web people, that’s 6 billion+ and growing. The smallest percentages are actually quite a lot of potential users (read sales), as @slicknet pointed out on the ydn blog last year.

Adding subtitles/captions increases your content’s reach by…making your content more Accessible. These are really deep thoughts, I know; actually, they are so simple, it’s always quite baffling to me when I hear people rail against them. Look, now that you’ve added your layer of Accessibility, you’re also now providing content to people who are interested in what you are saying as well. Furthermore, you’re also providing this content in two more ways than before: text on screen, and (if you choose to), print. You just tripled your content without having to provide new content. get it? An added bonus is that one of the few areas of search that I think are still wide open for someone to gobble up, is video search. Go back and read that sentence about tripling your content again.

Lastly, Universal Subtitles has a widget (that could be more accessible) that you can use to allow users to play around with your video(s)/content. While the old guard will most “protect” their weak-ass “intellectual rights” and fight this to the bitter end, you can chose to embrace this and reap the benefits. For example, the demo I made for this post is a video about Firefox, an open source project that I hold near and dear to my heart. I have added subtitles/captions to it because I wanted to. Mozilla released the video “The Story of Firefox” to the public domain, and just like karma, it came back to them: they get free work, and all the benefits that I’ve listed above, simply by doing what is right.

You can check it out here

Note: the demo works lovely in Firefox 4, unfortunately I used an ogv file and the uber lame Chrome is having problems with it. I’ll address this as well as the underlying widget’s JavaScript, css, html, here in another post shortly. So, I’m lame and you need to use Firefox at the moment.