Christian Heilmann

You are currently browsing the archives for the video category.

Archive for the ‘video’ Category

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.

Video of my talk at the University of Ankara

Tuesday, June 24th, 2008

Kivanc Erten has shot a video of my talk at the Open Source Event in the University of Economics and Technology in Ankara, Turkey explaining what free open resources Yahoo has for developers:

[slideshare-presentation:http://www.slideshare.net/cheilmann/yahoo-is-open-to-developers]

Part 1: Yahoo is Open

Part 2: Yahoo is Open

Making YouTube easier and more accessible (updated 12/06)

Thursday, June 12th, 2008

Warning: The YouTube API is flaky at the moment, so there might be some outages!

At this year’s Accessibility2.0 conference in London Antonia Hyde from United Response asked the audience for technological solutions to make the social web easier accessible for people with learning disabilities.

Her presentation Rich Media and web apps for people with learning disabilities is available on slideshare.

Whilst not being able to tackle all the issues mentioned (probably the biggest one being captioning) I took some time to play with the YouTube API to create a much easier interface to watch videos. The following screenshot shows the Easy YouTube Player in action:

Easy YouTube player showing a video

Using the player

You can use the player in several ways, the easiest is to just copy and paste a youtube url in the url field. However, there is also a sort of REST interface that allows you to do more:

http://icant.co.uk/easy-youtube/

Shows the player without any movie loaded, empty search fields and playlists.

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=9i0-btCTdN8

Pre-loads the video of this YouTube address and shows the preview image in the player.

http://icant.co.uk/easy-youtube/?search=panda

Performs a search on YouTube for the term panda and shows links to the videos in the playlist on the right. You can use more than one search word by adding them with a “+”. For example:

http://icant.co.uk/easy-youtube/?search=red+panda

One last option you have is to bookmark certain videos on del.icio.us and tag them for a user. In order to show these videos as a playlist you need to provide your user name and the tag separated by a dash. For example my user name on del.icio.us is “codepo8” and I bookmarked some videos with the tag “easyyoutubeplayer”. The following link will show them all in the playlist:

http://icant.co.uk/easy-youtube/?tag=codepo8-foreasyyoutubeplayer

You can mix and match the different options. If you for example want to show a video and perform a search for other videos you can use:

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=3UgpfSp2t6k&search=accents

Documentation

The full player documentation with instructions on how to host the player yourself is available in the docs folder Easy YouTube Player documentation.

Download

You can download the player with all the demo files here:

Changes

12/06/08

  • complete re-write of code
  • new buttons – glass were too complex
  • added video size control
  • added search and playlist support
  • added address field to send to friends
  • player now template driven – no more changes in main code needed
  • added documentation
  • added RESTful interface

28/05/08

  • moved buttons to the bottom of the player
  • text is now below the buttons and has an invisible extra “use this button to ” text for screen readers
  • pause button now toggles pause/play
  • mute button now toggles mute/sound
  • the URL of the buttons is not an anchor but a url now (that goes nowhere, but this is just to read out the right command)
  • removed the “current highlight” state
  • added a volume level indicator (as a visual bar and a hidden form field)

Accessihacking Online Video – my presentation for BarCamp Brighton

Saturday, March 15th, 2008

I just finished my sesssion at BarCamp Brighton about making online video more accessible by allowing for sensible, time-based commenting which could become a poor man’s captioning in a second stage. In general it is just showing off my hack of the YouTube player using their API.

My talk at GeekUp as video – the NorthCast recording is live

Tuesday, February 26th, 2008


screenshots of the video of my talk at GeekUp Leeds

The lovely chaps from Northcast have edited and uploaded the video of my talk at GeekUp Leeds about JavaScript and the YUI.

I especially like that they went through the whole story, right from me arriving handing over the schwag and being hugged by mysterious flatcapped Northern beauties, including the whole talk and the full Q&A session. The second part of the Q&A session is a bit on the rough side from a sound perspective but I guess the free beer consumed till then is to blame.

I hope this is useful to some, it was interesting for me to see what I talked about as the whole presentation was finished on the train and completely ad-libbed as it is.

Thanks again to GeekUp and the NorthCast people, good job and I am looking forward to more of this sort.