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();
     }
   

So far, I’ve added a very basic support for the audio and video elements. I’ve reused the SVG Tiny 1.2 audio/video elements code, added support for the src attribute (nor the <source> element, neither the <track> element), and added parts of the JS APIs (HTMLMediaElement, HTMLVideoElement, HTMLAudioElement) like play, pause…

It is still missing many things (readyState management, tracks, events, …) but you can already play with videos in an SVG context (using transforms or animations …).

I’ve put some basic tests here. Others should come. The next post should deal with the support for the Media Source Extensions specification on top of that. Stay tuned.

One thought on “HTML 5 media elements in SVG documents”

Leave a Reply

Your email address will not be published. Required fields are marked *