Continue reading Using WebVTT to carry media streams
This week I gave a talk during the HTML5 Developer conference in San Francisco. The conference was very interesting and I met many people doing cool things with SVG. You can view the slides of my presentation here. The gist of this presentation is: “If you create timeline-based animations and you structure them properly, using some of my tools (packager and JS player) you can stream SVG content on the Web just like a video, including live or adaptive streaming”. I’m still working on those tools but will be releasing them soon.
In my previous post, I described how to use the HTML 5 <video> element to play and control SVG animations, just like a video. HTML 5 and the <video> element also enable displaying text tracks on top of a video, and making sure it stays synchronized with the video thanks to the <track> element. However, this is currently implemented only in some browsers and mostly (only?) for the WebVTT format. Many JS players also provide WebVTT support. In this post, I describe an extension to Video.js to play and control SVG content synchronously on top of a video with the <track> element.
The syntax is pretty simple:
<video controls width='303' height='250'>
<source src='video1.mp4' type='video/mp4' />
<source src='video1.ogv' type='video/ogg' />
<track kind='graphics' src='annotations.svg' srclang='en' label='Squares'/>
<track kind='graphics' src='annotations2.svg' srclang='en' label='Circles'/>
And the result is shown below (example code is here) :
You can play the video, select a graphics track (displaying rectangles or circles whose positions and colors change every 5 sec in a 3-steps cycle) using the “Graphics” menu while the video is playing. You can then seek with the timeline, pause the video, play again and the graphics should stay synchronized. You can also change track while the video is playing.
Updated June, 4th 2013 following the SVG F2F meeting
I’ve been advocating for a while now for SVG to be treated as a first class citizen on the Web. One aspect where it’s still not the case, in my opinion, is in the handling of animated SVG. To me, it should be possible to view and stream animated graphics in the same way as a video, ie. you should be able to write:
<video controls width="640" height="480">
<source src="myAnimatedFile.svg" type='image/svg+xml' />
Continue reading Playing SVG content in HTML5 video elements