Tag Archives: HTML5

Adaptive streaming techniques for responsive images

Responsive image is a term in the Web world corresponding to the techniques involved when an author wants its website to be rendered with the right image for the right client given its viewing condition (screen size, pixel density, network, …). This technique falls, from a research point of view, in the broad category of media adaptation techniques to the user’s context. To me, at first sight, the problem seemed a no-brainer as it has been solved several times, including in the web world for video streaming with the recent approaches of adaptive streaming such as DASH. Naively I thought the same techniques could be used. However, after attending some meetings, including this week’s meetup, it appears that the environment constraints are such that the problem is not so simple to solve. In this post, I want to highlight the differences and give an example of how DASH manifest could be used for responsive images (I’m not really proposing it though). Continue reading Adaptive streaming techniques for responsive images

HTML 5 Media Source Extensions in SVG

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

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:

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:

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:

Continue reading HTML 5 media elements in SVG documents

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

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.


and the paper:

C. Concolato and J. Le Feuvre, Live HTTP Streaming of Video and Subtitles within a Browser, ACM MMSys, Oslo, Norway, February 2013 [PDF] [DOI 10.1145/2483977.2483997 ].

Live streaming of video and subtitles using DASH

This post contains the presentation made at the MPEG meeting in Shanghai, China, in October 2012, related to the input contribution M26906. The presentation gives the details about the demonstration made during the meeting. This demonstration showed the use of the Google Chrome browser to display synchronized video and subtitles, using the Media Source Extension draft specification and the WebVTT subtitle format. The video and DASH content was prepared using GPAC MP4Box tool.


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

Publication at MMSys 2011

Recently, I have been playing with two technologies on which I’ve been working for a while: interactive content and multimedia delivery. The result is a publication at MMSys 2011, which will be presented in February 2011 (See the program for the conference here). The paper is about how to deliver interactive applications (written in HTML5 or MPEG-4 BIFS) using HTTP Streaming technologies such as MPEG DASH or 3GPP AHS.

J. Le Feuvre, C. Concolato, J.-C. Dufourd, R. Bouqueau and J.-C. Moissinac, Experimenting with Multimedia Advances using GPAC, ACM Multimedia, Scottsdale, USA, November 2011 [PDF] [DOI 10.1145/2072298.2072427].

M. Gowing, Ph. Kell, N. E. O'Connor, E. Izquierdo, V. Kitanovski, X. Lin, Q. Zhang, C. Concolato, S. Essid, J. Le Feuvre and R. Tournemenne, Enhanced Visualisation of Dance Performance from Automatically Synchronised Multimodal Recordings, ACM Multimedia, Scottsdale, Arizona, USA, November 2011 [PDF] [DOI 10.1145/2072298.2072414 ].

J.-C. Dufourd, S. Thomas and C. Concolato, Recording and Delivery of HbbTV Applications, EuroITV, Lisbonne, Portugal, June 2011, pp. 51-54 [PDF] [DOI 10.1145/2000119.2000129].

C. Concolato, J. Le Feuvre and R. Bouqueau, Usages of DASH for Rich Media Services, Multimedia Systems Conference, San Jose, USA, February 2011 [PDF] [DOI 10.1145/1943552.1943587].