Christian Heilmann

Posts Tagged ‘video’

[watching] Creating responsive HTML5 touch interfaces

Friday, March 16th, 2012

In another episode of “things Chris watched in the gym and you should, too” here is a great video from the BayJax event series normally held in the Yahoo offices in Sunnyvale, California.

In this presentation Stephen Woods (@ysaw) of Flickr talks about touch interactions and how they used them in the tablet version of Flickr. You can watch it on YouTube or embedded here:

The slides are available on Slideshare and there is even an updated version Stephen presented at SXSW that is a bit less Webkit centric.

Here is what I liked about the video:

  • It is 24 minutes long – enough to burn 273 calories
  • Stephen knows his stuff without showing off. There is no ego, just a very relaxed presentation and great info. No need for pep rallies or showmanship, get the info, use it as you think fit
  • There are no “this works magical and is awesome” moments, you learn the good with the bad – it is a very realistic talk
  • It is a great mix of UX concerns, performance explanations and technical info. As in – you see how things were implemented, not how they theoretically should work backed up by random benchmarks
  • I found the first utterly sensible and necessary use case for CSS matrix transforms (simulating pinch to zoom)
  • It has cats
  • It never tries to show off with awesome knowledge or clever large words for simple solutions. Stephen openly admits to have come to the conclusions shown by trial and error

This is a great example that whilst everybody and their aunt will happily tell you that Yahoo is up a small polluted waterway without proper means of propulsion there is great talent and great work being done there. It also shows that when web technology information comes from people who have to deliver to users rather than push a certain product you can get wonderful insights without being hit over the head with them. I liked it. Great job, Stephen.

Web enabled video at news:rewired

Thursday, February 2nd, 2012

Tomorrow I will be at Microsoft London to make IE10 support classList speak at news:rewired – media in motion on the topic of open web video and what you can do with it. For this, I got 10 minutes and then answer questions (or ask them) in a panel.

Update: The audio is now available on archive.org:

The slides – for what they are worth – are on Slideshare:

Web enabled video

And here are the notes used in the slides and the story I will tell to the audience with all the links for you to try out:

Web enabled video

Today I have a few minutes to talk to you about online video and why it is an amazing opportunity for journalists.

Video is engaging…

There is no doubt that video is an incredibly engaging format for information, news, entertainment – well, for anything really. A video can much easier explain a complex topic than text could as people can see and repeat what you do. You can show instead of just telling or hoping people read what you painstakingly wrote.

Video is also hard to edit and change

One of the issues with video is that it is much harder to maintain than a text. Editing a video requires more technical expert skill and takes longer than writing a text or changing something in an article. Say you got a number wrong – in a blog post that can be easily remedied. In a video it means a re-edit, in the worst case a re-shoot. In the case of the web it also means re-encoding the video in a format fit for consumption on the web and re-uploading it to the servers where it needs to go.

Video is also a black hole on the web

The other big thing is that whilst your videos are engaging and amazing – for search robots on the web they are actually nothing at all. Video content is not indexed and the information in it doesn’t allow people to find it.

So what can be done about that?

It seems pretty old-school that we still live in a time where videos have to be produced as a fixed package, with names, labels, map overlays, other videos and imagery and extras inside the video. This does not only mean that these things can not be updated, but it also means in a lot of cases when it comes to online video that their quality is impeded by the overall quality of the video.

Separation makes things easier to maintain

On the web we long understood that by separating concerns from each other, we can deliver much better results. How things look is defined and maintained somewhere else than what they are. A text is written without any design to it, the design is defined in the site template or in the overall look and feel of your product. This makes it easy to re-use the text in several places and formats – covering mobile and desktop needs or even as a news subscription in a feed.

Separation allows anyone to enhance

OK this is going into “data hippy territory” but if you separate your content and make your video available, then anyone can help improve the quality of it and provide for example translations of the captions. For this, there is a simple interface called universal subtitles available.

Separation increases accessibility and find-ability

Subtitles and captions are a great example to make video content more available to people. Not only the hard of hearing but anyone. You can for example follow a debate in the gym or in the pub without needing to hear it. The other big thing about it is that a transcript of a video makes it searchable by Google and Bing. And – if it is timed it allows people to to jump to a certain section of a video instantly.

HTML5 video allows for all of that!

HTML5 video is a step forward in interactive video on the web. Its openness allows us to innovate with it and weave video content into the web much like we did with text and images in the past. No need to have a plugin, no need to pay licenses for offering your video in a fast loading and high quality format on the web. By using open formats you can make your videos part of the massive interlinked thing we called the WWW in no time.

Just another page element

In HTML5, multimedia is just another page element I can add into my design. You can make it interactive in parts, you can show only parts of it, you can rotate and style it any way you want. For example I always hated the second sun in Star Wars to show us that Tatooine is not on earth. In this demo I can now drag the sun away.

The timestamp is the glue

The main trick is that I have full control over the video in HTML5 and I can react differently according to the time the video is playing right now. I have many other things I can monitor and react to, showcased here and using HTML5 canvas I can even change the video itself while it is playing.

Tapping into the real-time web

All this allows us to have a video and get information from the web to mix with it. Realtime updates from Twitter, other videos, photos and comments from other sources – all of these can be used easily as we are using video with the web rather than putting already done video on the web for consumption. The 18 days in egypt interactive demo shows for example how you can add all kind of – at that time – real-time web information to the the January 28th speech by Hosni Mubarak.

Lean back, relax, grab some popcorn

And the good news is that Mozilla – the non-for profit for the betterment of the web – is making it easy for you to do that with our Popcorn project. Popcorn is a JavaScript library and tool to add web content to videos and re-distribute the final product on the web.

Some quick demos

Some very cool things have been built with popcorn already:

  • One millionth tower is a unique multi-project documentary from the National Film Board of Canada exploring “vertical living” around the world.
  • History in these streets is a audio documentary about the history of the Black Panther party enhanced with Google Maps, images and other multimedia
  • Buffy slays Twilight is a mashup of “Buffy the vampire slayer” and “Twilight” with information in Pop Up Video style.

Popcorn and its maker

We now need you to help us on our quest to make it easier for people like you to embrace the interactivity of online video. For this, we created popcorn.js as explained earlier, but we also made a tool that allows you to create videos in an interface. It is called popcorn maker, and we want you to kick its tires and tell us what is missing and what could be done better.

Creating screengrabs from HTML5 video with Canvas

Friday, July 1st, 2011

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.

screengrabs with canvas

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.

Fixing the vid.ly embed code for my needs

Monday, June 13th, 2011

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.

Vid.ly Bookmarklet – download different formats

Saturday, February 19th, 2011

If you followed my exploits lately in the realm of HTML5 video you’d know that I am a big fan of the video conversion service vid.ly. This service automatically converts your videos to dozens of different formats and redirects your browsers and mobile devices to the correct format when you call up a single URL.

Being a paranoid developer, I also wanted to have a way to download the browser optimised versions of the videos, so I wrote a bookmarklet to allow you to do that.

Simply drag the following link to your browser toolbar: Vid.ly download

The bookmarklet then adds links to any vid.ly page to download the different versions:

Vid-ly download links