Making YouTube easier and more accessible (updated 12/06)
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:
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:
Shows the player without any movie loaded, empty search fields and playlists.
Pre-loads the video of this YouTube address and shows the preview image in the player.
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:
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: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:
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)
Tags: accessibility, api, free, kids, learningdisabilities, player, social, usability, video, youtube
May 20th, 2008 at 10:48 pm
Wow! well done! thnx!
May 21st, 2008 at 3:42 am
I think this is a great concept. I have a few suggestions:
Colors: Any child will tell you that green (play) means go, yellow (pause) means slow down, and red (stop) means stop. These are the 3 primary buttons and therefore the rest should be gray
Back Button: Stop should send the video back to the beginning, so this seems irrelevant. I would remove it to reduce the options the user has (less options = less confusing)
Sound: Reverse the order. In every physical manifestation of sound controls I can think of, sound always goes from lowest to highest, from right to left (clockwise) or up or down (which doesn’t suit the layout). Perhaps this may be too literal, but what about having icons of a person for sound? Quiter could be represented with the index finger over the mouth (like “Shhh!”), Louder could be represented by two hands outstretched on either side of the mouth (as when shouting), and No Sound could have two hands covering the mouth.
May 21st, 2008 at 7:47 am
@Kevin thanks for the tips. The rewind button is in response to Antonia’s findings that people with learning disabilities need sometimes to repeat some information several times before it sinks in.
As to the order of the buttons, that seems to make more sense.
As to the icons: I am the first person to admit that I am bad at designing buttons. The buttons file is here: http://icant.co.uk/sandbox/easy-youtube/buttons.png does anyone want to have a go?
May 21st, 2008 at 8:05 am
@Kevin Order and colours are now changed.
May 21st, 2008 at 10:06 am
So this is what you have been working on in Gelsenkirchen. Very well done! Color contrasts could be enhanced but since anyone can create his or her own theme it is just perfect. Now all we have to do is wait until YouTube allows custom players on their website.
May 22nd, 2008 at 4:14 pm
Nice one Chris and I’ve passed it on the the http://www.OATSoft.org mail list
Steve
May 22nd, 2008 at 10:45 pm
hi I work with people with learning disabilities.
is hosting the player as easy as downloading it the folder
adding a developer key to the easy-youtube-player.js
(in notepad?)
then putting the folder on a website?
can’t seem to get it to work.
can you send me some more detailed instructions?
thanks
May 22nd, 2008 at 11:20 pm
Chris, excellent concept, good execution.
strange bug in Opera, screen grab:
http://www.openicon.org/temp/easytube.jpg
whereby toolbar is copied repeatedly on using the browser backwards and forwards controls,
speaking of which, seems to me the natural order of buttons is back stop pause forward
there’s some suggestion that text should be under icons, but….
May 22nd, 2008 at 11:21 pm
oops and I forgot to add, what about the full screen button?
May 22nd, 2008 at 11:35 pm
@peepo I couldn’t find a full screen feature in the API, got to dig deeper. As to Opera, it doesn’t work at all in Opera here. You can change the order and the look and feel of the player any way you want to, so go nuts.
@David, yes that should be all you have to do. Do you have a URL where I can see the problem?
May 23rd, 2008 at 10:23 am
It looks good,it will be very useful in school.
Clear buttons with mouse over colour changes to buttons.
It does say there is keyboard control which would allow direct switch/ overlayboard access.
However I cannot find what the keyboard strokes are.
a full screen view would also be very useful.
May 23rd, 2008 at 10:35 am
Excellent Chris: works icely with a screenreader, jaws identifies buttons as same page anchors (normal for JS links). I note that after pausing you have to press play to start re playing, you can’t hit pause again to continue, is this a ‘feature’? also v difficult to hear screenreader over audio, is it possible to adjust YouTube volume before you start playing? currently it is just about possible to press play and tab to the volume control while the vid is loading but not ideal. nice job though.
May 23rd, 2008 at 11:06 am
I’ve just realised (ie someone told me) that keyboard access means normal tab and return through the page links.
Could you add Accesskeys to the buttons to allow direct keyboard/switch access ?
and a full screen view would also be very good
May 23rd, 2008 at 4:09 pm
got it working , needed to rename the javascript file to match what it says in the html file.
May 23rd, 2008 at 4:22 pm
Christian
You already know that I think this is brilliant! I am in the throes of testing this with people with learning disabilities.
The feedback so far is that it’s really good and helpful. :-)
The full screen/ bigger screen is an issue as you already know.
The different coloured buttons are excellent. The only additional comment has been that play should always be green and stop always red unless you are about to select it. It’s a continuity thing. The mouse over change to yellow has been well received.
The only thing that has caused any confusion is knowing about the gradual sound increase/ decrease. I think it would need to be emphasised somehow that this was incremental or gradual. My only fix idea so far has been bars to indicate where people are on a scale of volume as well? But this may be confusing and too busy. I’m sure to have more.
I’ll feed back in more detail later but I just wanted to say that this is such a valuable piece of work. Thank you!
May 23rd, 2008 at 6:28 pm
Very impressed!
With respect to the use of colours, I found the rollover changes unexpected, turning orange no matter which button. Could they instead change to a different shade of their given colour? To me this would seem easier to understand and more consistent.
May 25th, 2008 at 2:46 pm
How are you using it Antonia? If the carer has to copy and paste in urls as in http://www.youtube.com/watch?v=9i0-btCTdN8 after the base player url http://icant.co.uk/easy-youtube/? how does the user with LD
to make them more independent-do the choosingthe essential aspect of youtube? you could set up a webpage of say 4-6 pics each with a specific link as in Chris’s example above- when clicked it goes to the new player page and allows playing via buttons etc, maybe the latter with a redirect time function goes back to the choice page(?)- but that’s only one page so you would have to alter the player page redirect to get to a different choice page. What is a better way?May 25th, 2008 at 2:55 pm
whoops just realised that wouldn’t be a good idea-better
to have a pic choice menu (leading to choice pages)
under or next to the player in the base player page?
May 26th, 2008 at 5:51 pm
Hi
This is a great development, thanks. Becuase Youtube is Flash based it tends to be inaccessible to visually impaired people, particulary those who rely on screen reading software such as JAWS.
I tested the URL with JAWS this morning hoping that the buttons would be read back. This is what JAWS read: for the play button: ‘Play same page link’ for the Pause button ‘pause same page link’ and so on. This doesn’t really mean anything to a screen reader user - although it’s a great improvement on existing access.
I know there has been some discussion on access keys however if it was possible to include some text descriptions to the buttons ie, Play button, select this button to play video’ well that would be brilliant and open Youtube to thousands of people.
Craig
May 27th, 2008 at 2:21 pm
It would be easier to use with an interactive whiteboard if the control keys were at the bottom of the video.
Is this possible?
May 28th, 2008 at 1:01 am
Ok, I did some changes to the player, according to the feedback here, see above what has changed.
May 28th, 2008 at 2:02 pm
Even better!!! most effective if I use Jaws to filter out the Flash object on the page then I have access to the video without the need to be in convenienced by any Flash objects on screen at all. also like that the ‘buttons’ are in a list as this gives an easy way of navigating to them using the Jaws jump to list quicknav key (l). Pedant points: You’ve called the functional switches “buttons” in their Link text. I understand the reason for this but this also lead me to believe that they might be html button controls so I tried to use the quicknav keystroke for button (B) to jump to them which of course doesn’t work because they aren’t. any chance that thw word button could be dropped from the Link text. the invisible deadend Links do work nicely though. this solution not only gets over the messy issue of jaws (and other screenreaders) announcing the links as same page anchors which is untrue confusing and messy to listen to, but also avoids the possibility of the buttons been invisible to users who have their screenreaders set to ignore same page anchors - something which people often do now that screenreaders are so much more capable at Web browsing and ’skipnav’ style links on web pages are largely redundant.
June 1st, 2008 at 1:06 pm
@ David
You are right, there is an issue around how people choose what they want to see - and how to select the URL. I’ve been focusing on the player itself more but have found that some people, with guidance, are able to copy and paste the URL.
This won’t work for everyone of course and ideally we would all like people to do as much as possible for themselves. Your ideas are interesting and certainly could work if you wanted to set up a playlist for people, especially the pics as links idea. I thought that this might be good for people with more complex needs.
I’ve been feeding back to Christian a bit more on this. :-)
June 13th, 2008 at 11:27 pm
Antonia, the playlist Christian uses is text based- how do you
get pictures eg as thumbnails, in the “playlist”?
June 16th, 2008 at 10:33 am
@ david
Hi there
This is a good point! I thought I would first work out from user testing I’ll be doing in the next couple of weeks if this was something people definitely wanted before thinking about how this might work.
A potential problem could be the size of the thumbnail and how instructive that could actually be (or not). So it’s something unsolved for the moment but it could crop up as something that people want/need.
This adds to my whole interest around playlists and how beneficial they could be for some people with learning disabilities - for anything online. Do let us know if you find a way of doing this you thinks works.
June 19th, 2008 at 9:38 pm
What license are you releasing this under ?
June 19th, 2008 at 9:42 pm
@richard BSD license. Check the docs.
July 7th, 2008 at 9:54 am
Brilliant work :)
Found a little bug: Pressing Stop followed by Repeat causes a JavaScript error when another button is pressed (Firefox 2)
July 8th, 2008 at 10:19 am
This is great stuff Christian :-)
July 13th, 2008 at 3:27 pm
I think this is great.
I don’t see a full screen API in the chromeless version of the youtube player (which is what I’m guessing you based this on), so think I know why that’s missing but would like to ask why no ’seek to’/ scrub functionality as in chromeless youtube example: http://is.gd/L0V ?
Was it for usability/ accessibility reasons?
thanks
S.
July 13th, 2008 at 9:00 pm
Yes Simon, I wanted to keep the interface as easy as possible. Talking with Antonia, I found that the most needed functionality is to go back a few seconds to repeat the last sentence, not to skip to a certain time.
This is easy to implement though, but the trick with truly accessible interfaces is not to listen to all requests and try to add more and more but really add only the bare necessities.
July 30th, 2008 at 7:56 am
Awesome tips!