It’s been a big year for HTML5 — especially for the <video> tag. In April, we all rushed out to buy iPads, said “So long!” to our nerd caves and planted ourselves firmly on the couch only to find out that a bulk of the video on the Internet is delivered using Flash. Ughh.
When I ask friends and acquaintances why they still use Flash to deliver video (even though most of their content is already encoded in H.264), many of them cite the ability to place “bumper ads” before and/or after their content — while locking out the video controls to ensure users don’t skip ahead.
Hunh.
Sure, it feels kind of slimy, but everyone has a right to get paid for producing and hosting content. Given the circumstances, I would rather watch that content with the most convenient device available to me at the time than be relegated to a PC. Truth be told, if I can’t watch the content now, I’m probably not going to file the URL away and view it when I get back to a PC. The Internet has moved on and there is new stuff to see.
Last week, at the world’s finest developer conference, I heard the video ad delivery excuse from some really bright people; it unnerved me a bit. With each person, I talked through a solution using HTML5 <video>, they would reluctantly nod, smile and say “We’ll see.” I do a lot of talking in my day-to-day, I know that nod, smile, “we’ll see” routine. It means, “Prove it. Where’s the code?”
Fair enough.
I took the afternoon and put together a quick example, it should be enough to get anyone started with HTML5 <video> and “bumper ads”. For that matter, it should be a decent introduction to the HTML5 <video> tag in general. Rather than step through it line by line, I’ll let you tear through the code on a larger demo.
A quick hat-tip to the WebKit engineering team for the idea some time ago.
Oh. Another quick note — the animated loading indicator (see below) was achieved with an SVG. Developers, start asking your designers for their vector graphic files; there are some amazing things that can be done with SVG.
