WebVTT, MP4 files, DASH and GPAC

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

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.