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'/>
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.
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
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:
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.