Posts Tagged ‘firefox’

DailyDev: HTML5 Video

June 2, 2010

DailyDev day 2 thumbnail imageEditors delight in turning this

Macbeth was very ambitious. This led him to wish to become king of Scotland. The witches told him that this wish of his would come true. The king of Scotland at this time was Duncan. Encouraged by his wife, Macbeth murdered Duncan. He was thus enabled to succeed Duncan as king.

into this

Encouraged by his wife, Macbeth achieved his ambition and realized the prediction of the witches by murdering Duncan and becoming king of Scotland in his place.

(If the example looks familiar, it should. It’s from Strunk and White.)

Developers delight in turning this

<object type="application/x-shockwave-flash" height="320" width="480" data="http://stephencearley.com/video/interviewing.swf" type="application/x-shockwave-flash">
<param value="http://stephencearley.com/video/interviewing.swf" name="movie"/>
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://stephencearley.com/video/interviewing.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>

into this

<video src="http://stephencearley.com/video/interviewing.ogv" controls>
</video>

That’s the markup for HTML5 video. Beautiful, isn’t it? (Be sure and soak it in before reading on. You’ll see why.)

The above code will display a video in the latest versions of Firefox, Opera and Chrome. But that’s it. You need to append the markup for the video to display in recent Safari, iPhone or Android releases. You need to append it further — with that busy Flash object embed from two boxes up — for the video to show in earlier versions of the above browsers, and, crucially, until Internet Explorer 9 comes out next year, in the world’s most popular browser.

If you’re using Firefox 3.5 or above, Opera 10.5, Chrome5 or recent Safari, iPhone or Android browsers, go ahead and check out the

Finished Product

Screengrab of HTML5 video

  • This page includes an annotated version of the full markup as well as the actual video.

If you’re not using one of the above browsers, download one! Firefox, Opera, Chrome and Safari are each free.

If you want to try this yourself, I strongly encourage you to read this chapter from the “Dive Into HTML5” online book. It’s long but totally worth it. It’s extremely informative, covering basics about digital video — starting with the difference between containers and codecs — as well as the HTML5 stuff, and doing it all in a way that’s accessible to n00bs without being condescending.

Pros

  • Even before HTML5 as a whole is officially supported, developers can publish video in a clean, plug-in-free, standards-based format.
  • It’s a way to display video on the Flash-less iPhone/Pad.
  • Videos can be controlled with Javascript for some real nifty interactivity.

Cons

  • Not supported on all browsers yet. No standardized codec.
  • Having to develop for multiple codecs, still create a Flash backup, decreases the net benefit to workflow efficiency.
  • Lots of accessibility potential. But right now, it’s mostly just that, potential.

Tip

  • Use the poster attribute to customize the preview frame. This can be any image — it doesn’t have to be a frame from the video.
<video src="http://stephencearley.com/video/interviewing.ogv" poster="http://stephencearley.com/video/poster.jpg">

Recommend?

  • Yes and no. For the average developer, it’s worth waiting until some of the issues mentioned above get worked out. But, make no mistake, especially with <video> tag support coming in IE9, HTML5 video should be ready for primetime soon. If you choose, you can already view most YouTube videos in HTML5. Vimeo also has an HTML5 player in beta.
Advertisements

Publishing the Process

October 30, 2009

It’s Friday. It’s been a long week. How about a cool music video? Radiohead’s “House of Cards” certainly fits the bill. Check it out. It was made with lasers! 

Lasers and rock ‘n’ roll. They’ve always gone together, haven’t they? This isn’t your father’s laser show, however. Here, lasers stood in for the camera, continuously scanning the set to form 3D images. 

The presentation was as progressive as the production. And that’s what I want to talk about. A collaboration between the band and Google visualization wunderkinds, the video has its own page on Google’s developer site, Google Code. Not exactly the natural habitat for a music video, is it? 

There’s more than just the traditional video, however. In addition to the one aired on MTV (I’m actually making a dangerous assumption here. I don’t watch MTV. And whenever I surf past it they’re never playing music videos.) there is a behind-the-scenes “making-of” video and an interactive version users can manipulate. 

This is a model that we’re likely to see more and more of — in entertainment, in software, in journalism, in politics, wherever communication is happening. Don’t just share the finished product. Share the process. And invite others to join in that process. This is true interactivity. Those who get this will be the ones who get ahead. 

Take this example from the world of journalism. It’s an oldie but a goodie. In 2007, left-leaning politics blog Talking Points Memo beat the mainstream media to the U.S. Attorneys purging story. Jarring for the Bush administration, yes, which would have preferred media never connected the dots. Just as jarring for new media critics who insisted blogs follow legacy publications’ lead.

So, how did TPM do it? It posted original reporting based on sources not typically consulted by the mainstream press and invited its readers to become sources themselves. In between the usual “Here’s what we know” posts, it asked “What do you know?” It told readers what information to pay attention to and often, how to go about getting it. 

And, from the world of software, another classic: Mozilla Firefox. The Internet browser achieved 25 percent market share just five years after launch thanks in large part to its open source approach. It allows developers to customize the browser and shows them how. As a result, it’s more versatile than its competitors. Firefox boasts a vast library of extensions that do everything from manage downloads to speed navigation to translate text.

Content creators: Users are going to want to adapt, add on to and comment on your content anyway. Given enough time, they’ll find a way how. So, why not leverage user participation to increase the value of your product? 

Got it? Good. Go on enjoying the wonders of lasers.

The World Wide Web, a Wonderland of Words

September 23, 2009

cookiesThe Web was built for conversation. Kind of funny, then, it can be so tricky to talk about.

Its lexicon is a mish-mash of new words, repurposed words, and, well, mish-mashed words.

Year after year, Web-related terms highlight updates to Merriam-Webster’s Collegiate Dictionary. Vlog and webisode are new for 2009. In next year’s update? Who knows? I’m still rooting for specticipants.

Such a fluid vocabulary can be difficult to keep up with.

Why do those things that keep track of what’s in your online shopping cart have such a tasty name? Cookies, Wikipedia tells us, were named such because, like fortune cookies, they have hidden information inside.

How did unsolicited messages, Hormel Foods implores, get to be known as spam? Internet entrepreneur Brad Templeton traces it back to a Monty Python sketch. I’ll let him explain.

Sometimes netizens don’t even need words. This makes them : ) and maybe even LOL.

Like the government, the Web’s good at making alphabet soup. HTML, URL, CSS, P2P, MMORPG — acronyms are everywhere.

Inevitably, celebrities get involved. Or, the Web involves them. If your business conference gets Rickrolled and you don’t have a sense of humor about it, watch out for the Streisand effect.

Of course, Web vocab isn’t always so cryptic. Browse, scroll and jump, among the many words carried over from print, should be familiar to even the greenest users.

The Web breeds laziness, we often hear. It sure does. E-book, e-commute, e-commerce, e-mail, e-marketing. E-nough.

We’ll forgive Apple for iMac, iPod and iPhone, because, repetition is good for branding. Not to mention, the products themselves rock. Plus, the iPod inspired podcast. What an elegant blend of new- and old-media terms.

Words fall in and out of favor. Here are two whose days could be (should be?) numbered: Audience, I’ve mentioned before, seems too passive to describe the modern Web user, who, on his lunch break, is ranking, commenting on and retweeting content from five different sites. Lurking seems too pejorative for what is an accepted and even encouraged online behavior. To avoid being flamed for uninformed content, it can be wise to lurk.

Speaking of flamed, fire comes up a lot: Once I’m done this post, think I’ll launch Firefox, fire off a message on Hotmail and burn some downloaded music to a CD. Makes sense, I guess. Fire was man’s first great tool. And, if the doomsdayers are right, it’s only a matter of time before the robots take over and the Internet becomes man’s last great tool. How poetic.