A colleague of mine recently pointed me to Michael Wesch’s great and inspiring anthropological introduction to YouTube, which made me curious about the use of video as an expression mechanism on the Web.
Coupling this with my recent upgrade in the camcorder world to a fully digital device, and the early results of the Video in the Web activity W3C started a year ago, I had to start playing in this area to understand it better.
As a starting point, I thought that I would use the video of the presentation I made to ParisWeb back in 2007 on the Mobile Web Best Practices, also available un-flashed on ParisWeb servers – usefully made available in a by-nc-sa Creative Commons license.
One thing that I needed to take into account, but was also a driver for this exploratory work, is that we are about to adopt a W3C internal policy that we can only publish media on-line if we ensure a minimum level of accessibility – at this time, this minimum level requires providing a full transcript of any material.
This post serves as an introduction to my adventures in the hazardous world of Web videos, where you’ll find me finding my way:
- in the world of transcription, and the tools available to that end on linux,
- in the formats for publishing and associating the transcripts with the video,
- the proposed HTMLMediaElement DOM Interface to make it possible to synchronize events with media playing, adding a pinch of JQuery, RDFa and Media Fragment to taste.
At the end of these stories, you will join me in rejoicing in front of a synchronized, close-captioned and annotated video and slides presentations viewer for your browser – if you browser lives sufficiently on the edge, that is (which I think at this time means specifically Firefox 3.1 beta), and if you’re patient enough to deal with video operations on a 85 MB video. And if you speak or read French.
And if you’re not patient enough to go past these obstacles, I have prepared a screencast of the system in action:
Transcript:
[the screen shows a Web page in a browser, split in 4 zones]
This is a screencast of a presentation viewer written in HTML and Javascript.
You can see here [on the top left corner] the area where the video will appear, here [on the top right corner] the slides that will accompany the video presentation, and there [on the bottom left corner] a table of contents.
If I start the video here [clicking on the play control of the video], you can see the closed captions appearing below the video.
And then I can navigate in the video and the presentation using the table of content.
And you can see how the video and the slides get updated live, and I can even have side notes appearing on the side [bottom right corner] of the screen.
(also available as Ogg/Theora video with a Timed Text transcript.)