aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Mozilla quiere romper la idea actual del video en Internet. El actual modelo, basado en un elemento pasivo que muestra información al usuario mediante el navegador simula perfectamente la televisión actual, pero gracias a Drumbeat ha surgido Popcorn.

Popcorn

Popcorn, es una iniciativa que añade una funcionalidad extra a los elementos <video /> y <audio /> del HTML5 permitiendo que muestren al usuario información extra sobre el video, subtítulos, geolocalización, información sobre personas que aparezcan,…

La idea es añadir una semántica extra a lo que hasta ahora solo era un canal de visualización.

XML

Mediante un fichero XML externo que definiríamos en nuestro elemento multimedia especificaremos toda la información que consideremos relevante de nuestro video.

<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>

Aquí vemos un ejemplo (recortado) del fichero XML que podríamos encontrar.

<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>

Uno de los ejemplos de uso de este tipo de información es la de enviar en tiempo real los subtítulos en Inglés a una herramienta de traducción para mostrarlos en un idioma diferente al definido en el XML.

Sin duda se trata de un interesante proyecto que Mozilla está apoyando con el que los videos/audios de Internet dejarán de ser lo que son hoy en día.