In a previous post, I described a bit the support in GPAC for the HTML 5 video and audio elements in SVG documents. My initial idea was to be able to play, with the Media Source Extensions API, adaptive streaming content (such as DASH) in SVG. So I started implementing MSE and it is now possible to play DASH content within an SVG presentation using GPAC. This post details how it was implemented. Continue reading HTML 5 Media Source Extensions in SVG
Tag Archives: SVG
Playing SVG content in HTML 5 track elements
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.
Playing SVG content in HTML5 video elements
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
HTML 5 media elements in SVG documents
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();
}
SVG Comics
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
Presenting SVG and my research work at Klagenfurt university
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]
Carriage of synchronized graphics and text in MP4 files
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
HTML 5 Video and SVG Graphics Synchronization
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
Automated Testing Script Generation
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
SVG Folded Maps in 3D environments
Some time ago, Erik Dahlström made an SVG version of a folded Google Map. That map uses images, masks and clippers to produce a 3D effect. It is adapted from an HTML/CSS/SVG folded map. I found both pretty cool but I thought I could make another interesting version using 3D tools. Here it is. It’s a mix of 3D shapes onto which I map an SVG content retrieved from OpenStreeetMap. Unfortunately, there’s no shading but interestingly the map folds/unfolds with animations. It’s written in VRML/MPEG-4 BIFS textual language. I guess it could easily be made with WebGL as well (and has been done in a very nice demo by Adobe with CSS Shaders). It works only in GPAC but you can see a resulting video here:
[youtube]http://www.youtube.com/watch?v=fbz98Yc4I_k[/youtube]