Lately I’ve been playing a lot with canvas and video and see what can be done with it to do things that are tough to do to videos on your own computers. One thing I found really annoying is that it is tough to do screen grabs of videos. In the past it was impossible (before video cards allowed you to capture flash content with screenshots) and even now it is a pain.

If you offer an online video that is HTML5, it is pretty simple to use canvas to allow end users to download images of your video. I’ve written a demo that does exactly that – it takes a snapshot of a video and adds its name and time stamp to the snapshot. Users then can download the snapshot as a PNG.

Here’s a quick tutorial on how it is done (also available on YouTube)

You can see the code in action or fork and grab the source on GitHub.

The only annoyance is that because of security concerns (cross domain origin) you can not grab images from videos not hosted on the same servergrab frames from videos not on the same server but you are not allowed to save them out as images. In Firefox you can save a canvas as an image, but it doesn’t work cross-browser it seems.

I am a developer evangelist. I’ve written a handbook about it and I have fought and lived for the role for a long time. I think it is very important for a company to have a person that understands tech and translates it into understandable content for everyone out there. It is also important to have that person to be the mediator between the tech and non-tech people in the company.

I am also my biggest critic – I record all my talks and listen to myself later on cringing when I find things I can improve. This is the reason why I want to ask you for help to make my (and more and more others) job to be more accountable.

Right now being a developer evangelism means you do a lot of good but it is hard to measure what you did. Of course there are low hanging fruit when it comes to measuring the success of talks for example:

• Collecting Tweets right after a talk – which is tricky as they tend to be very polarised – people either hated or loved it
• Number of new contacts (business cards) – I know a few companies that have this as a metric. Seems a bit eighties to me and not meaning much unless you also get some good conversation out of the contacts
• Number of people in the room – might actually be that the other talk in the other track was boring
• Conference feedback forms/speaker rate (and similar sites) – this suffers from the same issue as tweets, really

Other things can also be measured and should be listed as successes:

• Partnership with companies met at conferences – getting free accounts to their services for yours
• Invitations to other speaking gigs – especially hard to get ones
• Connections with other speakers – getting them as judges for own competitions or to come and speak at your office/events

I’ve been speaking with other people in similar roles and the really interesting thing for us is not the immediate numbers but what impact we had. Sadly enough it is really hard to get information about this. Of course it feels good to have people come up to you directly after a talk or training and thank you for what you did, but what I really want to know is what people did with the info I dished out. Therefore it would be super useful to me if you told me about any of the following things:

• How have your used things you learned?
  • Have you given an internal training?
  • Is your team now using this technology or product?
  • Did it help your career (did you start using it and found a new job)?
• Did you re-use some of the material for training or pitching to a client?
• Have you build and released a product differently after the talk/training? This information would be total killer to get!
• Did you join developing an open source product? – did the talk get you out of your 9-5 mentality and make you do something different?
• [your idea here] – in essence I would love to hear how my work has affected you and what you did about it

If we’d get this information it would validate what we do and give us a reason to keep pushing ourselves. Please, share. Thanks!

The best way to tell me about things is by sending a Tweet to @codepo8. You can also contact me on the email in the footer of this blog, or on Facebook. I also hang out on IRC freenode #HTML5 a lot.

The year is 1993 and a young me spends quite some time in front of a Commodore 1901 colour screen, a C-64 and use Amica Paint V1.8 with my trusty Competition Pro Joystick to set and delete pixels.

One of the things I did a lot was fonts for scrollers and logo effects, like the ones here:

Fast forward to 2000 – a bit less younger me got his first PC and used Star Commander to move some of these fonts over to the PC to bring them on to the web. By now I develop in Perl and I write an online tool that allows you to create logos using the fonts:

A few years later, I re-wrote the generator in PHP. Well, seeing the very cool C64 yourself Canvas demo I thought I should now have a go at creating a pure client side version.

So here we go – check out Canvas Logo-O-Matic and get the source on GitHub

The way it works is described very well in this Canvas image cropping tutorial and I heavily documented the logogen.js file for you.

Basically the trick is to write a JSON map of all the char data – where a char starts and how wide it is and then crop it out of a single sprite sheet top copy one after the other into the Canvas.

Things that made me happy this morning:

• Verbally is an iPad app to communicate for those who can’t speak
• Use the Source is a job board without agencies
• The New York Times has a beautiful interactive form to see how many families are like yours in DHTML
• Lea Verou has a CSS only Tic Tac Toe game
• Receipt racer is a game played with a PS3 controller and a Thermo printer
• Dad Life shows how cool suburban dads are
• Steve Faulkner did some in-depth testing of block level elements inside links and screen readers
• Killing closed technologies one at a time: PDF.js and MadJS (MP3 decoder) – go go go!
• Nyan Cat in CSS uses CSS3 for animations and JS for the audio loop
• Typing “gay” into Google makes a rainbow appear on the search button (Screenshot) – I can never see Yahoo doing that
• Mike Shaver talks about a three dimensional platform
• A searchable Spreadsheet with all the TED talks should keep you busy for a while

As you may have guessed from my talks and all I am a big fan of Vid.ly, a service that automatically converts uploaded videos to all kind of HTML5 compatible formats on the fly. I met with the owner for a coffee and they are overall good guys! Yesterday I realized though that they broke all my blog posts from the past where I embedded their videos as they changed their embed code!

OK, vid.ly was beta when I used it and I should have read my email but it was annoying nonetheless. I contacted them and we are sorting things out. To recap: Vid.ly converts a video you upload to 13 different formats supporting all browsers, mobile devices and consoles. It creates a single URL that redirects you to the correct format of the video in accordance of the device or the browser used to request it. Awesome!

In the beta program all you had to do to embed a video in HTML5 compliant browsers was this:

<video src="http://vid.ly/3l4e0q?content=video" controls width="500">
<a href="http://vidly.s3.amazonaws.com/3l4e0q/mp4.mp4">
Download &#8220;Multimedia on the web&#8221;
</a>
</video>

For some reason though this now sends my Firefox Aurora to the MP4 version which doesn’t work any more. I guess there is just a detection issue of Firefox Aurora. The official embed endorsed by Vid.ly is the following:

<iframe frameborder="0" width="640" height="360" name="vidly-frame"
src="http://s.vid.ly/embeded.html?link=2m1w3f&width=640&height=360&autoplay=false">
<a target='_blank' href='http://vid.ly/2m1w3f'>
<img src='http://cf.cdn.vid.ly/2m1w3f/poster.jpg' />
</a></iframe>

The embeded.html file always loads a player to play the video that falls back to Flash in Firefox Aurora and Chrome. On Safari and Opera it uses the HTML5 native controls. I want that for all – why load an extra player and Flash when the browser is capable? So instead of using the official player I checked what URLs it generates and put in the URLs by hand:

<video width="500" height="375" controls style="display:block">
<source src="http://cf.cdn.vid.ly/2m1w3f/mp4.mp4" type="video/mp4">         
<source src="http://cf.cdn.vid.ly/2m1w3f/webm.webm" type="video/webm">         
<source src="http://cf.cdn.vid.ly/2m1w3f/ogv.ogv" type="video/ogg">
<a target='_blank' href='http://vid.ly/2m1w3f'>
<img src='http://cf.cdn.vid.ly/2m1w3f/poster.jpg' width="500">
</a>   
</video>

This is unfortunate, and it seems to be an issue with Aurora detection. The following works fine in Opera and Chrome and Safari.

<video width="640" height="360" controls 
src="http://vid.ly/3l4e0q?content=video"></video>

I could also use this redirect URL to get formats, f.e. http://vid.ly/3l4e0q?content=video&format=webm gets you the WEBM version.

Detecting the video capabilities of a browser seems to be still quite an annoying thing as you need to do it in JS and not by just reading the user agent on the server. To me, players should never fall back to Flash when the browser is capable of playing it natively – for the sake of accessibility.