Category Archives: SVG

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]

DASH, GPAC, SVG, WebVTT

WebVTT, MP4 files, DASH and GPAC

1 Comment

In a previous post, I described how to package and manipulate WebVTT content in MP4 files according to the latest ISO standard using MP4Box. Basic import of WebVTT or SRT file is as follows:

MP4Box -add file1.vtt:lang=en subtitle1.mp4

or

MP4Box -add file2.srt:FMT=VTT:lang=en subtitle2.mp4

and then, the basic usage to create DASH subtitle segments of 10 seconds:

MP4Box -dash 10000 subtitle.mp4:role=subtitle video.mp4

It is now possible to play these MP4 files with the GPAC players (on all supported platforms: Win, Mac, Linux, Android, iOS). So, try it out and let me know if it has bugs. You can for instance test this file or its DASH version.

MP4Client http://download.tsi.telecom-paristech.fr/gpac/webvtt/counter-vtt.mp4
MP4Client http://download.tsi.telecom-paristech.fr/gpac/webvtt/dash/counter-subtitles.mpd

This post describes some details on how the rendering was achieved.

[slideshare id=24802693&doc=m30301-reportonwebvttimplementation-130731093103-phpapp01]

Continue reading WebVTT, MP4 files, DASH and GPAC →

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, 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 →

Diffusion Curves, Streaming, SVG, Vector Graphics

Presenting SVG and my research work at Klagenfurt university

Leave a comment

Dear followers,

Last week, while teaching a course on interactive multimedia applications at Klagenfurt University, Austria, I gave a talk about the upcoming SVG 2 standard and about my research work in this area. You can find below the slides of this presentation:

[slideshare id=15641011&doc=2012-klagenfurt-researchtalk-121214112913-phpapp02]

DASH, SVG, Synchronization

Carriage of synchronized graphics and text in MP4 files

Leave a comment

Following my previous post on the synchronization of HTML 5 video and SVG content, we are now proposing a contribution to MPEG, for the upcoming meeting in Stockholm. This work is part of the activity on timed text (subtitling, caption …). We propose to store frame-based SVG, WebVTT, HTML … content as a particular timed metadata track. We take special care of secondary resources, i.e. resources pointed to by the SVG, HTML … The goal is to be able to use SVG, WebVTT or HTML timed tracks in Dynamic Adaptive Streaming over HTTP. Continue reading Carriage of synchronized graphics and text in MP4 files →

HTML5, SVG, Synchronization

HTML 5 Video and SVG Graphics Synchronization

1 Comment

My experience with multimedia standards, such as MPEG-4 BIFS, made me used to very good synchronization between video streams and graphics. So I wanted to check that the same was possible with web technologies, in particular with the plugin-less HTML5. To be more precise, I would like to display graphics on top of a video in a synchronized manner, with frame accuracy. The synchronization should be preserved when: playing, at different speed; paused; seeked; when the video stalls, …. I investigated several options and present some of the results. Continue reading HTML 5 Video and SVG Graphics Synchronization →

GPAC, SVG, Testing

Automated Testing Script Generation

Leave a comment

During a recent SVG Working group discussion, we talked about how to improve the SVG test suite. Part of the problems in the development of the test suite is the sheer number of tests to be produced (i.e. written + reviewed + approved) and then tested against every implementation. The purpose of the testing is to check if every feature passes in at least two independent implementation: that is the criteria to exit Candidate Recommendation. The SVG Tiny 1.2 test suite already contains 496 tests, the SVG 1.1 2nd edition has 526. The SVG 2 spec will probably have more. Having one person test all features is not realistic anymore.

The CSS WG has been working for a long time on this issue. CSS 2.1 has 9685 tests! Together with a team from W3C, the WG set up a test suite server, where one can browse the CSS Test Suite, test its viewer and report the results. All results are then aggregated. The W3C architecture allows for 2 types of tests:

  • ref tests (see Mozilla’s use of ref tests), where a test is provided together with an alternative way of producing the same result (visually).
  • JavaScript tests, where together with the test, one provides JavaScript calls to test that the DOM tree is in the expected state.

Both of these types require quite some work to produce either the reference image or the expected results. This can be tedious. Also, for interactive cases, one would have to create the script to test all interaction paths. And for animation, one would have to author the JavaScript to test changes at some point in time.

In GPAC, we experimented a different approach. Continue reading Automated Testing Script Generation →