Noticia

---

0 ¡votar!

Añade información a los vídeos con HTML 5 y Popcorn

PopCorn es una iniciativa que añade información extra a los elementos “video” y “audio” de HTML 5, permitiendo a los usuarios mostrar información extra sobre los vídeos, subtitulso, geolocalización....

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

Escrito por: angel carrero 08 Noviembre 2010

Recomendar a un amigo

Compartir en redes

Email  

Comentarios