We first declare the needed data reader. The data is stored following a json format in the Tim.json file.
<div chm:component="jsonreader" id="data" chm:src="Tim.json" >
The video is displayed by the CHM media player provided the URI of the file.
<div chm:component="videoplayer" id="tm" chm:src="http://advene.org/video/TimBerners-Lee_2009.ogv" >
The subtitle text is displayed by a caption component that is related to the videoplayer. The displayed data is accessed by querying the data reader with the required parameters. We need to retrieve the set of annotations representing the 'Transcript' type which is the transcription of the discourse and to display the content on and by reference to the video player identified by its ID.
<div chm:component="caption" chm:src="data" chm:filter="type=='Transcript'" chm:content="${content}" chm:timelineref="tm" >