Para poder mostrar esta información, solo deberemos de añadir en un fichero XML externo toda la información que queremos mostrar y mediante el atributo “data-timeline-sources” de esas etiquetas, mostraremos la información extra del vídeo.
<video width="530px" height="299px" controls="" data-timeline-sources="xml/webMadeMovies.xml"> <source type="video/ogg; codecs="theora, vorbis" src="wmmjuly6.ogv"></source> <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2" src="wmmjuly6.mp4"></source> </video>
Un ejemplo del fichero XML que nos podemos encontrar podría ser el siguiente.
<popcorn> <manifest> <people> <person id="celine" name="Celine" salutation="Miss." > <resource id="celinehomepage" src="http://www.celinecelines.com/" description="Celine's Homepage" /> </person> <person id="brian" name="brian" > </person> <person id="SteveSong" name="Steve Song" > </person> [...] </people> <places> <place id="saopaulo" type="city" name="Sao Paulo"> <resource id="saopaulowiki" src="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" description="Sao Paulo city, Brazil"/> </place> <place id="CapeTown" type="city" name="Cape Town"> <resource id="capetownwiki" src="http://en.wikipedia.org/wiki/Cape_Town" description="Cape Town, South Africa"/> </place> [...] </places> <attributions> <attribution id="yacht1attrib" nameofwork="Don't Fight The Darkness" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/> <attribution id="yacht2attrib" nameofwork="Psychic City Voodoo City" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/> <attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/> [...] </attributions> <articles> <resource id="theinternet" src="http://en.wikipedia.org/wiki/internet" description="The Internet"/> <resource id="villagetelco" src="http://en.wikipedia.org/wiki/Village_telco" description="The Village Telco"/> <resource id="oilspill" src="http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill" description="Deepwater Horizon Oil Spill"/> [...] </articles> </manifest> <timeline> <footnotes> <footnote in="00:00:00" out="00:14:00" target="footnotediv">Look around the page as info is updated!</footnote> </footnotes> <resources> <attribution in="00:00:05:02" out="00:00:34:00" target="container5" resourceid="yacht1attrib"></attribution> <attribution in="00:00:34:01" target="container5" resourceid="yacht1attrib"></attribution> <footnote in="00:00:00" out="00:15:00" target="footnotediv">Look around the page!</footnote> <videotag in="00:00:05:02" out="00:00:10:07">Steve Song</videotag> <attribution in="00:00:05:02" out="00:00:10:07" target="container5" resourceid="villagetelcoattrib"></attribution> <twitter in="00:00:05:02" out="00:00:10:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120" overlay="images/overlay/twitter.png" /> <wiki in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberOfWords="200" target="wikidiv" overlay="images/overlay/wiki.png"/> <flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px" overlay="images/overlay/flickr.png"/> <googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/> [...] </resources> <map> <location resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/> <location resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/> <location resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/> [...] </map> <subtitles> <subtitles language="en" align="center"> <subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle> <subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the internet</subtitle> [...] </subtitles> <subtitles language="fa" align="center"> <subtitle in="00:04:00:08" out="00:04:01:09">My name is Mona Kasra</subtitle> <subtitle in="00:04:01:10" out="00:04:03:11">and I'm building a better Internet</subtitle> [...] </subtitles> </subtitles> <credits></credits> </timeline> </popcorn>
Podéis ver un ejemplo de esto funcionando en el siguiente enlace.
Vía: Anieto2k