Category Archives: video

GPAC, HTML5, MP4, video, WebVTT

Using WebVTT to carry media streams

2 Comments

Some of you may know the WebVTT format as a subtitling format. But WebVTT can also be used to carry video-synchronized metadata, i.e. any data that is not meant to be displayed, as is (or at all), but that should be processed at a given time in the video by some JavaScript code in the HTML page.

In this post, I describe the results of the modifications I made to MP4Box to export any MP4 tracks in WebVTT, including audio or video data. The idea here is not to replace the MP4 file format by WebVTT because WebVTT was not meant for that and is not really good at that (for one it is a textual format). The idea is more to provide a (temporary) way for people to experiment with JavaScript decoders for their data. You can already start using MP4Box to test but this work is still preliminary and is subject to changes.

Continue reading Using WebVTT to carry media streams →

Streaming, SVG, video

Streaming of SVG animations on the Web

2 Comments

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.

[slideshare id=27516554&doc=thegraphicalweb2013-131024003537-phpapp02]

HTML5, SVG, video

Playing SVG content in HTML 5 track elements

Leave a comment

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'/>
</video>

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.

HTML5, SVG, video

Playing SVG content in HTML5 video elements

2 Comments

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' />
</video>

and be able to play, pause, seek in the SVG content just like you would in a video. So, I’ve started tweaking a JavaScript HTML 5 video player for that. I’ve used Video.js. The result is demonstrated below and the code on GitHub. It is still ongoing work but you should already be able to select a cartoon, play it, pause it, seek while playing or while paused. This post discusses below the results and problems I had.

Continue reading Playing SVG content in HTML5 video elements →