As explained in this blog post by Jared Wein of the Firefox team there are quite a few new features in Firefox when it comes to playing HTML5 video. As an Aurora user, I am most excited about the option to go full-screen, the ability to overlay video statistics and to save a snapshot of the current frame as a JPG. You can see me talking about and showing them in this short video:
Firefox has a few features up its sleeve when it comes to HTML5 video playback you might not be aware of:
Firefox‘s seeking is now accurate to millisecondsmicroseconds, there is visual feedback when the video has stalled and clicking the whole video pauses and plays it
Firefox Beta has specialised controls when you watch video on small devices and watching HTML5 video shows a pleasing background rather than a brutal grey
Firefox Aurora has fullscreen, statistics overlay, saving of snapshots and controls appearing when the video ended
Firefox Nightly has a full-screen button, fading video controls after 2 seconds of non-interaction, no loading throbber on audio, error reporting when a video could not be loaded on the video, loop attribute support, and resizing of videos larger than the browser window when you watch them directly
Planned features for Firefox are an overlay play button like YouTube when the video is not set to autoplay and turning off screensavers during fullscreen playback.
There are so many cool things you can do with HTML5 video on the Web, and our winners circle definitely reflects the possibilities. So join us in congratulating our July Dev Derby winners!
Thanks to everyone that submitted their HTML5 video demos for the July Dev Derby. On to the next race!
Right now, there are only a few days left to submit your History API demo for August. And coming up next we have Geolocation for September and CSS Media Queries for October. So start experimenting and hack on.
Last weekend I was in New York City to speak at the GothamJS conference and Mozilla also sponsored it. It was a nice event with about 200 attendees, taking place in the NYIT Auditorium on Broadway.
The event was one-track with 8 speakers, and personally I always prefer when it’s just one track for follow-up discussions and that everyone have seen and heard the same thing. The topics were ranging broadly between script loaders and HTML5 in one end, and voice-controlled telephony applications in the other.
My presentation
My talk was about HTML5 APIs in general, to give an introduction to them but also to inspire people to try things out and also give feedback to both working groups and web browser vendors about current implementations.
What I especially liked talking about is services like vid.ly which helps you take control over the problem of different video codec support in different web browsers, by storing various formats and then deliver the most suitable one depending on the web browser/device accessing it.
Another favorite is Universal Subtitles, which is an excellent tool for everyone to be able to add subtitles to a video clip, empowering users with varying language skills to take part of a video and its content and sharing it with the world.
An option to make the content of a web site richer, there is Popcorn.js to sync key events in the video playing to what kind of text or other information you want to present to go with that. To complement that, the Butterapp is an editor to create that kind of content syncing, currently in alpha.
I also mentioned videograbber for taking easy video screenshots in the web browser.
Dev Derby <video> challenge
I also want to take the opportunity to remind you that Mozilla Dev Derby has a challenge for what you can accomplish with the <video> that goes till the end of July, so please submit anything if you have a good idea!
Moving pictures have always fascinated people. From the first zoetropes to the multi million dollar blockbusters of today – seeing things move grabs our attention as humans much better than any clever copy or imagery could. Video was alien to the web for a long time. Well, not alien, but we needed plugins to make them play. With newer browsers and HTML5, we now have the <video> element to natively embed video in a web page. This allows us to, amongst other things:
Style video elements with CSS and SVG
Make the video interact with other elements of the document and vice versa
Use Canvas to grab frames from videos and manipulate them
Create accessible video as the controls can be used with a keyboard without us having to write that functionality
Using this arsenal, you can do pretty cool things. You can:
Now it is your turn to show us what you can do with HTML5 video! We don’t expect you to build another Wilderness Downtown or 3 Dreams of Black, but we are very excited to offer you the chance to shine in July’s Mozilla Dev Derby.
Why not use CSS3 and Canvas to redesign the Outer Limits intro? Why not make the video do the things Diana Ross talks about in Upside down? Why not build a video cropping tool in Canvas? How about you have a crack at making closed captioning and subtitling work with HTML5 video? There are many ideas floating about – it just needs a bit of drive and a text editor to go for it. So, show us what you can do!
There are a lot of tools out there to make your life easier with HTML5 video. Vid.ly makes it easy to convert videos, Popcorn.js is a library to sync page content and video and there are many tutorials on video available.
To get you into the mood and see some examples in action, we are running an HTML5 video webinar on the 14th of July and you can ask some questions you have upfront using Google Moderator.
Bring the web screen alive, I dare you! I am off to watch Cinema Paradiso again.
Update 2011-07-20: The video recording of this webinar is now available:
On Thursday, July 14th, at 16:00 UTC, Chris Heilmann will give second in the (so far sporadic) Mozilla Developer Engagement webinar series, discussing syncing HTML5 video with Google maps, using his “Spirit of Indiana Jones” demo as an example. Chris has already blogged about this demo, so this webinar is a chance for you to take part in a conversation, rather than just receive a broadcast.
Take a look at the demo code and the blog post, and then bring your questions to the webinar session. If you have a Google account, you can post questions (or respond to others’) ahead of time in this Google Moderator series; if not, ask your questions in IRC during the session.
The webinar will be broadcast on Air Mozilla, with text chat on #airmozilla on irc.mozilla.org. (There’s an IRC widget on the Air Mozilla page if you need it.)
Add this webinar to your calendar:
Oh, by the way, HTML5 video is the theme of the Mozilla Dev Derby for July. Whether you’re new to working with HTML5 video or an “old pro” (if there is such a thing), submit a demo during July to show off your stuff and win cool prizes.
If you’ve been around the software industry for a little while, you’ve probably attended at least a few “webinars”, where someone does an online presentation, which you can watch and listen to in real time. You might be able to ask questions via a chat window, and if you’re lucky, the presenter will select your question to answer in the very limited time allocated for audience questions. If you can’t make it to the real-time presentation, you can watch a recording later, but you miss out on the Q&A.
The Mozilla Developer Engagement team is experimenting with a slightly different approach to presenting webinars. We’re decoupling the presentation part from the Q&A part. Instead of a real-time presentation with a little bit of Q&A, we’re publishing a screencast, and scheduling time for online chat about it later.
You can view the screencast on your own time, as much as you need to, and peruse and play with the code under discussion. Then, for those who have questions, the presenter will be on IRC during scheduled times to discuss them. You’ll also be able to chat with other participants, which usually isn’t possible in a typical webinar.
Here is the first in an intended series of pseudo-webinars: Christian Heilmann talking about syncing page content with HTML5 video.
The screencast
The chats
Discussion of this screencast will take place in the #mdnlearning channel on irc.mozilla.org at the following times:
10:00 UTC, Monday, 21 March
19:00 UTC, Monday, 21 March
If you don’t have an IRC client installed (such as the Chatzilla add-on for Firefox), you can access the #mdnlearning channel via this Mibbit widget.
We picked the times for the chat sessions to cover as many time zones as possible. We know they won’t be ideal for everybody. Please let us know in the comments how much lead time you’d like between publishing screencasts and the scheduled chats.
A few weeks ago Portsmouth in England hosted the first Heart and Sole conference. This new conference had quite some appeal to me because of its nature: it was organised by local people who want to boost the web development market, it had rather unknown speakers who show a lot of great stuff online (and I wanted to see how they perform in front of an audience) and it was incredible affordable for the price of a sandwich lunch in London.
Seeing that the audience consisted almost exclusively of students and small agencies I thought I write a talk about HTML5 explaining that is not only a plaything of large companies and “web development rockstars” but that everybody can be part of the cause and that we really need people’s input and real life implementations to make the new open tech revolution a reality.
You can see the other videos of Heart and Sole on Vimeo including a great Introduction to Canvas by Rob Hawkes, musings on Designing WordPress by John O’Nolan and Making Ajax userfriendly with the History API by Syd Lawrence.
There will be another Heart and Sole, so keep your eyes open.
Today encoding.com released a new service called vid.ly which is not yet another URL shortener, but actually a very impressive service for converting video.
One of the biggest annoyance of using HTML5 video is to convert your movie to various formats supported by different browsers. Vid.ly does this job for you: it converts the video you upload into 14 different formats for different browsers and, more importantly, devices. The interface is very intuitive and you can stand by and watch the conversion happen or simply let it run whilst you go offline or do other things. Once the service finished creating the different formats for you, you get an email. You then can visit the vid.ly URL on different devices and you get the video in the correct format.
Interview with Jeff Malkin about vid.ly
To learn more about the service, I got Jeff Malkin, president of Encoding.com on the phone and asked him a few things about the service. You can listen to the interview:
In the interview Jeff answered a few questions and explained a few of my concerns:
Vid.ly uses the same cloud backend as encoding.com, consisting of Amazon’s EC2 and S3 services and fallbacks
The conversion happens with ffmpeg and a few other, commercial products as vid.ly also creates a high quality FLV for you
The videos are tested on the real devices and they are also using services that give them access to more exotic physical devices on demand
In addition to simply converting the videos to MP4 and Ogg (which can be done using Archive.org), vid.ly also creates iOS versions that support adaptive streaming and webm versions.
There is no API to make part of a build process in the free version but they are working on a pro version that will allow you to batch process videos and have more granular access to the encoding parameters
Right now, you can’t send the converted videos back to a hosting platform of your own choice but this is also in the making.
First impressions
When trying out the service with a video, I was very impressed with the interface. After entering your code you get a video URL. Pressing start asks you for an email (to notify you once the conversion is done) and offers you an interface to upload your video, either from FTP, HTTP, S3 or your hard drive. A log on the page tells you at any time what is happening:
The whole page is a progress bar. Once you uploaded the video the progress starts from left to right and tells you in the log box what is going on. You can stand by or close the page – vid.ly emails you once the conversion is done.
Under the hood
Once the conversion is done, you get the email with your URL and you can try it on different devices. I checked it on my Nexus One and my iPod and got working videos on each without any redirect, ad display or other annoyances.
The embed code vid.ly sends you can be improved a bit but was built for ease of use:
Instead of linking the different sources, vid.ly adds a JavaScript that re-writes the source accordingly. If you check the script you see that it includes the VideoJS player by Zencoder and that there is a lot of detection going on – both using the HTML5 Video API and browser sniffing for Quicktime support or to fall back to Flash.
This seems a bit overkill and could be improved. The other annoyance are IDs on the video and script as that prevents you from using several vid.ly videos in the same document. But then again, the power of open tech is that you can work around that:
The email is that it tells you that there is a high quality FLV file created for you at http://vidly.s3.amazonaws.com/{ID}/flv.flv. This means that your videos are stored in Amazon’s S3 with a bucket with the ID of your video. If you rename the flv.flv to ogv.ogv, webm.webm and mp4/mp4 accordingly you use these URLs to create your own video embed without JavaScript or you can download the different versions.
Try it out yourself
You can try vid.ly yourself using the HNY2011 code. What do you think?
There are dozens of video players that allow you to do all the normal things with videos: play, pause, jump to a certain time and so on. More advanced ones also allow you to fast forward and reverse the video and support subtitles.
One thing I haven’t found yet though is zooming and rotation of a video. Granted, an edge use case, but sometimes it is cool to be able to zoom into a detail like a blooper (boom mic in the background) or an easter egg (check for the term “A 113″ in every Pixar movie – an homage to the classroom most of the original Pixar cast learned their trade in).
Rotation might come in handy when you recorded your video in portrait instead of landscape on your camera and you don’t want to re-encode it before you put it on the web.
The HTML5 video tag allows you to style the video with CSS and CSS3 transforms allow both for scaling and for rotation. So let’s put those together.
Embedding a video is as simple as this (see this in action on the demo page):
<video controls><sourcesrc="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4"type="video/mp4"><sourcesrc="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973.ogv"type="video/ogg"><p>Your browser doesn't support the HTML5 video tag it seems.
You can see this video as part of a collection <ahref="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/">at archive.org</a>.</p></video>
Now, to scale this video you can use CSS3 transform:scale:
Now, this doesn’t make much sense though as it changes the dimension of the video (in the demo page I needed to change the margin for each video accordingly). To really provide a “zoom” functionality, we’d need to keep the original size and cut off the parts we don’t need. We could do this using a CANVAS element, but why go that far when a simple DIV does the job for us?
All we need to do to keep the space is nest our videos in a DIV with the class stage:
<divclass="stage"><video controls><sourcesrc="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4"type="video/mp4"><sourcesrc="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973.ogv"type="video/ogg"><p>Your browser doesn't support the HTML5 video tag it seems.
You can see this video as part of a collection <ahref="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/">at archive.org</a>.</p></video></div>
The CSS to make the cropping work is the following:
In order to provide a zoom and rotate functionality, we need to use JavaScript and buttons for the end user. The first hurdle here is – as you probably already realised from the CSS – browser differences in the syntax. Therefore we need to detect which of the transformations the current browser supports. The safest way is to ask the browser:
Once this runs we can set a transformation with the following JavaScript syntax:
var zoom =1.5;var rotate =20;
v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';
Of course it doesn’t make much sense to rotate the controls with the video. Therefore you need to provide your own. You can use any of the aforementioned players for that or roll your own. To demonstrate, I just built one with a single button allowing you to play and pause the video:
As part of our university outreach programme, a few Mozilla people and volunteers went to Boston last week to give a series of lectures on web technologies for games development.
During the week we covered topics like WebGL for 3D development, basics of JavaScript, debugging and performance, canvas development, offline development and local storage and multimedia on the web. We’ll make these slides available in the comments to this blog post.
