Category Archives: Multimedia

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 →

GPAC, MPEG, WebVTT

WebVTT in MP4

3 Comments

As you probably know from my previous posts, MPEG is standardizing a way to deliver WebVTT files as streams (or tracks) in the ISO Base Media File Format (e.g. MP4 files). The standard is still at draft stage but I recently added VTT-in-MP4 support to GPAC (no playback support yet), as reported in the contribution below. Not that this support might change in the future depending on how the draft standard progresses, in particular in response to some comments we’ve made, as reported in the contribution referenced in this post. Continue reading WebVTT in MP4 →

MPEG, MPEG-2 TS, Synchronization

Delivery of Timeline for External Data in MPEG-2 Transport Stream

Leave a comment

As a follow-up of the work on Multimedia Hybrid Delivery (see this post), Telecom ParisTech, together with TVN, EPFL, UPM and IETR/INSA, of the H2B2VS project, submitted the following contribution to the 104th MPEG meeting, which was held last week in Incheon, South Korea. Continue reading Delivery of Timeline for External Data in MPEG-2 Transport Stream →

GPAC, HTML5, SVG

HTML 5 media elements in SVG documents

1 Comment

As a follow-up of the work I did some time ago on the implementation of SVG Tiny 1.2 in GPAC (see this paper), and following the SVG WG decision to adopt the HTML 5 media elements in SVG 2.0, I decided to implement some support for these elements in GPAC, to better understand the differences between the old SVG Tiny 1.2 <video> element and the HTML 5 <video> element. As a result you can now run for example the following markup in GPAC:

   
   
     function init() {
       var v = document.getElementById("v");
       v.src = "video.mp4";
       v.play();
     }

Continue reading HTML 5 media elements in SVG documents →

Animation, Multimedia, SVG, Vector Graphics

SVG Comics

2 Comments

A long time ago (back in 2006), a student approached me to create comics for mobile phones. I suggested he used SVG Tiny 1.2 as this was a promising standard at that time in the mobile industry.

Recently, I came across his work on some old archive and I thought, since the student did not go further (I think, I lost track of him), it should be made available for people to get inspired by it. Continue reading SVG Comics →

DASH, Streaming, WebVTT

Live streaming over HTTP of video and subtitles (cont’d)

Leave a comment

Here are the slides describing the demo I gave during the ACM MMSys 2013 conference, in Oslo, February 2013. It is an update of the demo I gave during the MPEG meeting in Shanghai, October 2012. Source code should be published soon in GPAC and if I can, I’ll set up a running live server (or, if not possible, I’ll put a video of the demo). Stay tuned.

[slideshare id=16861694&doc=mmsys-2013-demo-130301085551-phpapp01]

and the paper:

[textimport http://biblio.telecom-paristech.fr/cgi-bin/ws/biblio.cgi?author=cyril+concolato&type=inproceedings&etat=published&lang=en&dept=tsi&year=2012-&id=13223]

DASH, MPEG-2 TS, Synchronization

Towards Hybrid IP-based and MPEG-2 TS non-IP-based synchronized delivery of media streams

1 Comment

Hi all,

With some delay, I’ve put the slides that we presented at MPEG in October 2012, on how to extend MPEG-2 TS and MPEG-DASH to support synchronized playback of streams coming from IP based networks and from MPEG-2 TS based (non-IP) networks. The contribution is here:

[textimport http://biblio.telecom-paristech.fr/cgi-bin/ws/biblio.cgi?author=cyril+concolato&type=standardisation&etat=submitted&lang=en&dept=tsi&year=2012&id=12905]

and the slides here:

[slideshare id=16005665&doc=m26903-hybriddeliveryts-130115093207-phpapp02]