== Defining an Enhanced API for Video == ===== Abstract ===== The HTML5 specification introduces the <audio> and <video> media elements, and with them the opportunity to dramatically change the way we integrate media on the web. The current HTML5 media API provides ways to play and get limited information about audio and video, but gives no way to programatically access or create such media. ===== Authors ===== * Anna Sobiepanek([http://twitter.com/annasob @annasob])* Scott Downe ([http://twitter.com/ScottDowne @ScottDowne])* Daniel Hodgin ([http://twitter.com/dhhodgin @dhhodgin])* Nick Cammarata ([http://twitter.com/@nicklovescode @nicklovescode])* Rick Waldron ([http://twitter.com/@rwaldron @rwaldron]) ===== Other Contributors ===== * [[http://www.etherworks.ca Brett Gaylor]] ===== Status ===== '''This is a work in progress.'''<br/>Lighthouse bug tracking page: [http://webmademovies.lighthouseapp.com/projects/63272/overview Popcorn Lighthouse Account]<br/>Official Website: [http://popcornjs.org/ popcornjs.org]<br />Web Made Movies on Drumbeat: [http://www.drumbeat.org/project/webmademovie webmademovies]<br/> ===== XML Grammar===== We are trying to derive the best possible structure for all of the information needed to be stored about the video. We also do not want to repeat information, here is what we have identified would be repeating data (we called this the manifest):<br/>See the most current XML API structure [https://gist.github.com/811326 on gist]. ===== Demo =====We created a demo that describes what popcorn is and what it can do. You can view it [[http://scotland.proximity.on.ca/sdowne/OttawaDemo/demos/popcorn/ here]].We also created a demo to showcase the functionality of the library. You can view it [[http://popcornjs.org/demos/semantic_video/ here]] Here is some of the data that was used to describe the video. The data uses the XML grammar described above in the XML API. <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> <person id="mona" name="Mona" > <resource id="monahomepage" src="http://www.monakasra.com/" description="Mona's Homepage"/> </person> <person id="dave" name="Dave" > </person> <person id="noah" name="Noah" > </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> <place id="GrandIsle" type="city" name="Grande Isle, Louisiana"> <resource id="grandeislewiki" src="http://en.wikipedia.org/wiki/Grand_Isle,_Louisiana" description="Grande Isle, Louisiana"/> </place> <place id="MITMediaLab" type="building" name="MIT Media Lab"> <resource id="mitmedialabhome" src="http://www.media.mit.edu/" description="MIT Media Lab"/> </place> <place id="Austin" type="city" name="Austin, Texas"> <resource id="austinwiki" src="http://en.wikipedia.org/wiki/Austin,_Texas" description="Austin, Texas"/> </place> <place id="NewYork" type="city" name="New York, New York"> <resource id="newyorkwiki" src="http://en.wikipedia.org/wiki/New_York_City" description="New York, New York"/> </place> <place id="Seoul" type="city" name="Seoul, Republic of South Korea"> <resource id="seoulwiki" src="http://en.wikipedia.org/wiki/Seoul" description="Seoul, Republic of South Korea"/> </place> <place id="Montreal" type="city" name="Montreal, Quebec"> <resource id="montrealwiki" src="http://en.wikipedia.org/wiki/Montreal" description="Montreal, Quebec"/> </place> <place id="harvard" type="building" name="Harvard Law School"> <resource id="harvardlawhome" src="http://www.law.harvard.edu/index.html" description="Harvard Law School"/> </place> </places> <attributions> <attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/> <attribution id="villagetelcoattrib" nameofwork="Village Telco" copyrightholder="Richard Mills" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/> <attribution id="prodigyattrib" nameofwork="Prodigy Commercial" nameofworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" /> <attribution id="compuserveattrib" nameofwork="1991 Compuserve Internet" nameofworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" /> <attribution id="aolattrib" nameofwork="1996 AOL Commercial" nameofworkurl="http://www.youtube.com/watch?v=0kf1DBg5vJs" /> <attribution id="chronicles1attrib" nameofwork="Internet" nameofworkurl="http://www.archive.org/details/CC1232_internet" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" /> <attribution id="chronicles2attrib" nameofwork="The Internet" nameofworkurl="http://www.archive.org/details/episode_1134" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" /> <attribution id="bankattrib" nameofwork="Using the Bank (1947)" nameofworkurl="http://www.archive.org/details/Usingthe1947" copyrightholder="The Prelinger Archives" /> <attribution id="networksattrib" nameofwork="Computer Networks - The Heralds of Resource Sharing" nameofworkurl="http://video.google.com/videoplay?docid=4989933629762859961#" copyrightholder="MIT"/> </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"/> <resource id="zittrain" src="http://en.wikipedia.org/wiki/Jonathan_Zittrain" description="Jonathan Zittrain"/> <resource id="compuserve" src="http://en.wikipedia.org/wiki/Compuserve" description="Compuserve"/> <resource id="aol" src="http://en.wikipedia.org/wiki/AOL" description="AOL"/> <resource id="prodigy" src="http://en.wikipedia.org/wiki/Prodigy_%28online_service%29" description="Prodigy"/> <resource id="internetprotocol" src="http://en.wikipedia.org/wiki/Internet_Protocol" description="Internet Protocol"/> <resource id="timbernerslee" src="http://en.wikipedia.org/wiki/Tim_Berners-Lee" description="Tim Berners-Lee"/> <resource id="worldwideweb" src="http://en.wikipedia.org/wiki/World_wide_web" description="World Wide Web"/> <resource id="wikipedia" src="http://en.wikipedia.org/wiki/Wikipedia" description="Wikipedia"/> <resource id="openstandards" src="http://en.wikipedia.org/wiki/Open_Standards" description="Open Standards"/> </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> <footnote in="00:00:00" out="00:15:00" target="footnotediv">This video made exclusively for drumbeat.org </footnote> <tagthisperson target="inthisvideo" in="00:00:05:02" out="00:00:10:07" person="Steve Song" /> <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" src="@stevesong" target="personaltwitter" width="238" height="120"/> <wikipedia in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberofwords="200" lang="en" target="wikidiv"/> <flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/> <googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/> <twitter in="00:00:10:07" out="00:00:18:04" title="Oil Spill" src="#oilspill" target="twitter" width="238" height="120"/> <googlenews in="00:00:10:07" out="00:00:18:04" target="googlenewsdiv" topic="Oil Spill"/> <attribution in="00:00:10:07" out="00:00:18:04" target="container5">Grassroots Mapping, Tungsten Monkey</attribution> <tagthisperson target="inthisvideo" in="00:00:18:04" out="00:00:25:02" person="Keyboard Cat"/> <twitter in="00:00:18:04" out="00:00:25:02" title="Keyboard Cat" src="#keyboardcat" target="twitter" width="238" height="120"/> <attribution in="00:00:18:04" out="00:00:25:02" target="container5">KeyBoard Cat, Charlie Schmidt</attribution> <googlenews in="00:00:18:04" out="00:00:25:02" target="googlenewsdiv" topic="Keyboard Cat"/> <tagthisperson target="inthisvideo" in="00:00:28:09" out="00:00:29:07" person="Jeffrey Warren" /> <attribution in="00:00:28:09" out="00:00:29:07" target="container5">Grassroots Mapping, Tungsten Monkey</attribution> <tagthisperson target="inthisvideo" in="00:00:29:08" out="00:00:31:00" person="Village Telco Guy" /> <wikipedia in="00:00:32:00" out="00:00:41:00" resourceid="theinternet" numberofwords="200" target="wikidiv"/> <googlenews in="00:00:32:00" out="00:00:41:00" target="googlenewsdiv" topic="the internet"/> <tagthisperson target="inthisvideo" in="00:00:41:00" out="00:01:07:09" person="Jeffrey Warren" /> <flickr in="00:00:41:00" out="00:01:07:09" target="personalflickr" userid="35034346917@N01" numberofimages="8" padding="4px"/> <twitter in="00:00:41:00" out="00:01:07:09" title="Oil Spill" src="#oilspill" target="twitter" width="238" height="120"/> <googlenews in="00:00:41:00" out="00:01:07:09" target="googlenewsdiv" topic="Oil Spill"/> <googlemap resourceid="grandislewiki" in="00:00:41:00" out="00:01:07:09" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/> <wikipedia in="00:00:41:00" out="00:01:07:09" resourceid="oilspill" numberofwords="200" target="wikidiv"/> <footnote in="00:00:41:00" out="00:01:07:09" target="footnotediv">Learn more about Grass Roots mapping at www.grassrootsmapping.org</footnote> <twitter in="00:01:07:10" out="00:01:25:07" title="Steve Song" src="@stevesong" target="personaltwitter" width="238" height="120"/> <flickr in="00:01:07:10" out="00:01:25:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/> <googlemap id="CapeTown" resourceid="capetownwiki" in="00:01:07:10" out="00:01:32:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/> <wikipedia in="00:01:07:10" out="00:01:32:07" resourceid="villagetelco" numberofwords="200" target="wikidiv"/> <tagthisperson target="inthisvideo" in="00:01:25:08" out="00:01:32:07" person="Michael Adeyeye" /> <tagthisperson target="inthisvideo" in="00:01:32:08" out="00:01:38:02" person="Charlie Schmidt" /> <twitter in="00:01:32:08" out="00:01:57:11" title="Charlie Schmidt" src="@chuckieart" target="personaltwitter" width="238" height="120"/> <googlemap id="MITMediaLab" resourceid="mitmedialabhome" in="00:01:32:08" out="00:01:57:11" lat="42.3613" long="-71.0863" target="container2" zoom="12"/> <tagthisperson target="inthisvideo" in="00:01:38:02" out="00:01:41:10" person="Keyboard Cat" /> <tagthisperson target="inthisvideo" in="00:01:41:11" out="00:01:57:11" person="Charlie Schmidt" /> <tagthisperson target="inthisvideo" in="00:02:09:00" out="00:03:07:05" person="Jonathan Zittrain" /> <twitter in="00:02:09:00" out="00:03:07:05" title="Jonathan Zittrain" source="@zittrain" target="personaltwitter" width="238" height="120"/> <googlemap resourceid="harvardlawhome" in="00:02:09:00" out="00:03:07:05" lat="42.4222" long="-88.6137" target="container2" zoom="12"/> <wikipedia in="00:02:09:00" out="00:02:20:00" resourceid="zittrain" numberofwords="200" target="wikidiv"/> <wikipedia in="00:02:20:01" out="00:02:23:00" resourceid="compuserve" numberofwords="200" target="wikidiv"/> <wikipedia in="00:02:23:01" out="00:02:26:00" resourceid="aol" numberofwords="200" target="wikidiv"/> <wikipedia in="00:02:26:01" out="00:02:33:00" resourceid="prodigy" numberofwords="200" target="wikidiv"/> <attribution in="00:02:15:09" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution> <attribution in="00:02:17:01" out="00:02:20:00" target="container5" resourceid="aolattrib"></attribution> <attribution in="00:02:20:01" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution> <attribution in="00:02:17:01" out="00:02:26:00" target="container5" resourceid="aolattrib"></attribution> <attribution in="00:02:26:01" out="00:02:33:00" target="container5" resourceid="prodigyattrib"></attribution> <attribution in="00:02:37:00" out="00:02:47:00" target="container5" resourceid="networksattrib"></attribution> <attribution in="00:02:47:01" out="00:02:55:00" target="container5" resourceid="bankattrib"></attribution> <attribution in="00:03:07:10" out="00:03:29:00" target="container5" resourceid="bankattrib"></attribution> <wikipedia in="00:02:41:00" out="00:02:57:00" resourceid="internetprotocol" numberofwords="200" target="wikidiv"/> <wikipedia in="00:02:57:01" out="00:03:03:00" resourceid="timbernerslee" numberofwords="200" target="wikidiv"/> <twitter in="00:02:57:01" out="00:03:03:00" title="Tim Berners-Lee" src="@timberners_lee" target="twitter" width="238" height="120"/> <googlenews in="00:02:57:01" out="00:03:03:00" target="googlenewsdiv" topic="Tim Berners-Lee"/> <wikipedia in="00:03:03:01" out="00:03:28:00" resourceid="worldwideweb" numberofwords="200" target="wikidiv"/> <googlenews in="00:03:03:01" out="00:03:28:00" target="googlenewsdiv" topic="World Wide Web"/> <googlenews in="00:03:28:00" out="00:03:32:00" target="googlenewsdiv" topic="Wikipedia"/> <wikipedia in="00:03:28:01" out="00:03:32:00" resourceid="wikipedia" numberofwords="200" target="wikidiv"/> <wikipedia in="00:03:36:00" out="00:03:43:00" resourceid="openstandards" numberofwords="200" target="wikidiv"/> <tagthisperson target="inthisvideo" in="00:03:09:00" out="00:03:16:00" person="NCSA guy" /> <tagthisperson target="inthisvideo" in="00:03:16:01" out="00:03:18:05" person="Computer Chronicles guy #1" /> <tagthisperson target="inthisvideo" in="00:03:16:02" out="00:03:21:00" person="Computer Chronicles guy #2" /> <tagthisperson target="inthisvideo" in="00:03:21:01" out="00:03:28:06" person="Computer Chronicles guy #3" /> <tagthisperson target="inthisvideo" in="00:03:43:00" out="00:03:56:00" person="Jonathan Zittrain" /> <twitter in="00:03:43:00" out="00:03:56:00" title="Jonathan Zittrain" src="@zittrain" target="personaltwitter" width="238" height="120"/> <footnote in="00:03:43:00" out="00:03:57:00" target="footnotediv">Read Zittrain's book 'The Future of the Internet — And How to Stop It'</footnote> <tagthisperson target="inthisvideo" in="00:03:59:00" out="00:04:03:05" person="Mona Kasra" /> <tagthisperson target="inthisvideo" in="00:04:03:06" out="00:04:07:00" person="Noah Workman" /> <twitter in="00:04:03:06" out="00:04:07:00" title="Noah Workman" src="@noahworkman" target="personaltwitter" width="238" height="120"/> <tagthisperson target="inthisvideo" in="00:04:03:06" out="00:04:13:01" person="Wilken Sanches" /> <attribution in="00:04:10:00" out="00:04:13:00" target="container5" resourceid="attrib"></attribution> <tagthisperson target="inthisvideo" in="00:04:13:02" out="00:04:19:05" person="Keechang Kim" /> <twitter in="00:04:19:06" out="00:04:24:01" title="Celine Celines" src="from:celinecelines" target="personaltwitter" width="238" height="120"/> <tagthisperson target="inthisvideo" in="00:04:19:06" out="00:04:24:01" person="Celine Celines" /> <flickr in="00:04:19:06" out="00:04:24:01" target="personalflickr" userid="13072070@N00" numberofimages="8" padding="4px"/> <lastfm in="00:40:00" out="01:24:00" artist="yacht" target="lastfmdiv"/> </resources> <map> <googlemap resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/> <googlemap resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233" target="container2" zoom="8"/> <googlemap resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/> <googlemap resourceid="austinwiki" in="00:03:59:00" out="00:04:03:05" lat="45.5089" long="-73.5542" target="container2" zoom="8"/> <googlemap resourceid="newyorkwiki" in="00:04:03:06" out="00:04:07:01" lat="40.7143" long="-74.0060" target="container2" zoom="8"/> <googlemap resourceid="saopaulowiki" in="00:04:07:02" out="00:04:13:01" lat="-23.5489" long="-46.6388 " target="container2" zoom="8"/> <googlemap resourceid="seoulwiki" in="00:04:13:02" out="00:04:19:05" lat="37.5665" long="126.9780" target="container2" zoom="8"/> <googlemap resourceid="montrealwiki" in="00:04:19:06" out="00:04:24:01" lat="45.5089" long="-73.5542 " target="container2" zoom="8"/> </map> <subtitles languagesrc="language" accessibilitysrc="accessibility"> <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> <subtitle in="00:00:05:00" out="00:00:07:00">Have you ever wondered if there is a common thread</subtitle> <subtitle in="00:00:07:01" out="00:00:09:00">that exists between open source</subtitle> <subtitle in="00:00:09:01" out="00:00:11:00">phone hackers in South Africa, </subtitle> <subtitle in="00:00:12.5:00" out="00:00:16:00">adventurers using kites to map an oil spill, </subtitle> <subtitle in="00:00:19:00" out="00:00:22:03">and a video of a cat seen by tens of millions of people?</subtitle> <subtitle in="00:00:27:00" out="00:00:28:06">Well it's the Internet</subtitle> <subtitle in="00:00:28:06" out="00:00:31:06">the cat, the kite, and the phone hackers</subtitle> <subtitle in="00:00:31:07" out="00:00:33:06">would For all be impossible without the Internet</subtitle> <subtitle in="00:00:33:07" out="00:00:35:09">an open network that lets anyone</subtitle> <subtitle in="00:00:35:10" out="00:00:37:11">participate without asking permission.</subtitle> <subtitle in="00:00:39:00" out="00:00:41:11">The Internet is what lets M.I.T student Jeffrey Warren</subtitle> <subtitle in="00:00:42:00" out="00:00:45:06">use kites to map an oil spill. </subtitle> <subtitle in="00:00:47:06" out="00:00:48:07">well wait a second why do we have to go all the way</subtitle> <subtitle in="00:00:48:08" out="00:00:50:00">into space to take pictures of things</subtitle> <subtitle in="00:00:50:02" out="00:00:52:00">that are right, literally right next to us, you know. </subtitle> <subtitle in="00:00:53:00" out="00:00:55:00">We can use simple tools like balloons or kites.</subtitle> <subtitle in="00:00:55:06" out="00:00:57:00">Have the camera taking pictures every five seconds </subtitle> <subtitle in="00:00:58:00" out="00:01:00:00">the idea is to get a lot of people involved </subtitle> <subtitle in="00:01:00:06" out="00:01:03:00">in producing maps and then share all of the information</subtitle> <subtitle in="00:01:03:03" out="00:01:05:00">like Wikipedia style you know?</subtitle> <subtitle in="00:01:06:00" out="00:01:08:09">The Internet is what allows Steve Song and his friends</subtitle> <subtitle in="00:01:08:10" out="00:01:10:11">to create a D.I.Y. phone network</subtitle> <subtitle in="00:01:11:00" out="00:01:12:00">called the Village Telco.</subtitle> <subtitle in="00:01:12:00" out="00:01:16:00">Everyone that has a device, that we call a mesh potato,</subtitle> <subtitle in="00:01:16:00" out="00:01:18:00">actually has a phone number</subtitle> <subtitle in="00:01:18:06" out="00:01:20:06">and can call anyone else on the mesh at no charge.</subtitle> <subtitle in="00:01:21:06" out="00:01:24:06">So taking open-source principles to a telephone company.</subtitle> <subtitle in="00:01:25:00" out="00:01:28:05">Everything is open, anyone can come and anyone can join</subtitle> <subtitle in="00:01:29:05" out="00:01:31:00">anyone can make contributions </subtitle> <subtitle in="00:01:31:00" out="00:01:32:00">and that's why I'm here.</subtitle> <subtitle in="00:01:32:05" out="00:01:34:05">The Internet is what allowed Charlie Schmidt</subtitle> <subtitle in="00:01:35:00" out="00:01:36:05">to film his cat on his keyboard</subtitle> <subtitle in="00:01:37:00" out="00:01:38:00">and the rest is history. </subtitle> <subtitle in="00:01:41:00" out="00:01:45:00">I remember having two profound thoughts back to back </subtitle> <subtitle in="00:01:45:05" out="00:01:47:08">and the first one was any pervert in his basement </subtitle> <subtitle in="00:01:48:02" out="00:01:51:00">can compete with NBC. </subtitle> <subtitle in="00:01:52:04" out="00:01:58:00">And then I thought, ohh I am that pervert in his basement.</subtitle> <subtitle in="00:01:58:04" out="00:01:59:05">It wasn't always this way</subtitle> <subtitle in="00:02:00:05" out="00:02:02:05">before the web our computers could only network</subtitle> <subtitle in="00:02:02:08" out="00:02:05:05">through a series of walled gardens, and we had to ask</subtitle> <subtitle in="00:02:06:00" out="00:02:08:00">permission to publish our content or create new services.</subtitle> <subtitle in="00:02:08:05" out="00:02:10:05">There were some big companies in there that thought</subtitle> <subtitle in="00:02:11:00" out="00:02:13:01">they would run the mainframes that we </subtitle> <subtitle in="00:02:13:02" out="00:02:16:05">might be mediating data through.</subtitle> <subtitle in="00:02:15:00" out="00:02:18:03">CompuServe, America Online, The Source,</subtitle> <subtitle in="00:02:18:04" out="00:02:19:12">MCI Mail,Prodigy.</subtitle> <subtitle in="00:02:20:00" out="00:02:21:00">if you go to CompuServe,</subtitle> <subtitle in="00:02:21:00" out="00:02:23:00">you'll get whatever CompuServe has put under its roof.</subtitle> <subtitle in="00:02:23:00" out="00:02:26:00">If you subscribe to AOL you'll get whatever AOL has.</subtitle> <subtitle in="00:02:26:00" out="00:02:28:06">Prodigy even has a twenty-one volume electronic</subtitle> <subtitle in="00:02:28:06" out="00:02:30:00">encyclopedia that's updated quarterly</subtitle> <subtitle in="00:02:30:00" out="00:02:32:00">including thirty messages.</subtitle> <subtitle in="00:02:32:00" out="00:02:33:06">Alright, Prodigy :D</subtitle> <subtitle in="00:02:33:06" out="00:02:37:00">No one really factored in that off in a quiet corner,</subtitle> <subtitle in="00:02:37:00" out="00:02:40.5:00">there were tinkerers doing foundational technologies</subtitle> <subtitle in="00:02:40:06" out="00:02:41:06">for networking,</subtitle> <subtitle in="00:02:42:00" out="00:02:46:06">and they had a certain freedom that the firms didn't have.</subtitle> <subtitle in="00:02:46:06" out="00:02:50:00">You didn't have to do a business development deal</subtitle> <subtitle in="00:02:50:00" out="00:02:53:06">with the owner of the Internet...</subtitle> <subtitle in="00:02:53:06" out="00:02:55:00">before you could put up a website.</subtitle> <subtitle in="00:02:55:00" out="00:02:58:00">So that's what allowed Tim Berners-Lee</subtitle> <subtitle in="00:02:58:00" out="00:03:00:00">to develop a protocol for an application,</subtitle> <subtitle in="00:03:00:00" out="00:03:03:00">that would just run on top of the Internet,</subtitle> <subtitle in="00:03:03:00" out="00:03:04:00">called the web.</subtitle> <subtitle in="00:03:04:06" out="00:03:07:00">And then he was like, OK world go to it.</subtitle> <subtitle in="00:03:09:00" out="00:03:11:00">Ordinary people are becoming electronic publishers.</subtitle> <subtitle in="00:03:11:01" out="00:03:12:06">They are putting up the things</subtitle> <subtitle in="00:03:12:07" out="00:03:14:00">that mean something to them</subtitle> <subtitle in="00:03:14:01" out="00:03:16:00">and they want to share it with the rest of the world.</subtitle> <subtitle in="00:03:16:01" out="00:03:18:00">Why is it better than CompuServe or Prodigy?</subtitle> <subtitle in="00:03:18:01" out="00:03:19:09">That anyone can put any servers on </subtitle> <subtitle in="00:03:19:10" out="00:03:21:06">and have it do anything they want.</subtitle> <subtitle in="00:03:21:07" out="00:03:23:00">In fact most browsers have the ability</subtitle> <subtitle in="00:03:23:01" out="00:03:24:06">for you to view that source code.</subtitle> <subtitle in="00:03:24:07" out="00:03:26:02">I can go in then and start changing it</subtitle> <subtitle in="00:03:26:03" out="00:03:27:10">myself for free. Ok great.</subtitle> <subtitle in="00:03:27:11" out="00:03:29:09">Listen there’s even an encyclopedia</subtitle> <subtitle in="00:03:29:10" out="00:03:31:06">Awesome. All right.</subtitle> <subtitle in="00:03:31:09" out="00:03:34:00">We owe everything about the Internet</subtitle> <subtitle in="00:03:34:01" out="00:03:36:00">to the fact that its open.</subtitle> <subtitle in="00:03:36:01" out="00:03:38:00">And the hacker spirit that the people</subtitle> <subtitle in="00:03:38:01" out="00:03:40:00">who created it believed it.</subtitle> <subtitle in="00:03:40:01" out="00:03:42:04">But all that could change.</subtitle> <subtitle in="00:03:42:06" out="00:03:44:10">The way things are… are not the way</subtitle> <subtitle in="00:03:44:11" out="00:03:47:00">things will inevitably be.</subtitle> <subtitle in="00:03:48:00" out="00:03:50:01">The Internet itself is evolving</subtitle> <subtitle in="00:03:50:02" out="00:03:51:01">and can be pushed</subtitle> <subtitle in="00:03:51:02" out="00:03:53:06">in one direction or another.</subtitle> <subtitle in="00:03:53:07" out="00:03:55:09">And some futures are much better than others.</subtitle> <subtitle in="00:03:55:10" out="00:03:57:06">It’s great to have the example of the World Wide Web.</subtitle> <subtitle in="00:03:57:07" out="00:03:58:11">It’s great to have the example of Wikipedia.</subtitle> <subtitle in="00:03:59:00" out="00:04:00:01">There’s more where that came from.</subtitle> <subtitle in="00:04:17:00" out="00:04:19:00">And I help make a better Internet</subtitle> <subtitle in="00:04:19:01" out="00:04:21:06">By making things easier to use</subtitle> <subtitle in="00:04:22:09" out="00:04:24:00">At Web Made Movies</subtitle> <subtitle in="00:04:24:01" out="00:04:26:03">we want to build a better Internet</subtitle> <subtitle in="00:04:26:04" out="00:04:28:04">by making video more open.</subtitle> <subtitle in="00:04:28:06" out="00:04:31:00">The page your watching is a good example</subtitle> <subtitle in="00:04:31:06" out="00:04:34:05">We’re going to keep exploring how video</subtitle> <subtitle in="00:04:34:06" out="00:04:35:06">can be more like the web.</subtitle> <subtitle in="00:04:35:07" out="00:04:37:06">And tell the story of some web heroes</subtitle> <subtitle in="00:04:37:07" out="00:04:38:06">along the way.</subtitle> <subtitle in="00:04:39:02" out="00:04:40:08">Explore our credits section to see</subtitle> <subtitle in="00:04:41:00" out="00:04:45:00">how you can get involved.</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 language="pt" align="center"> <subtitle in="00:04:05:03" out="00:04:07:00">I make the Internet better</subtitle> <subtitle in="00:04:07:01" out="00:04:08:06">producing and sharing music</subtitle> <subtitle in="00:04:08:07" out="00:04:10:01">using Creative Commons</subtitle> </subtitles> </subtitles> <webpages> <webpage in="00:04:00:08" out="00:04:19:00" target="iframes" resourceid="monahomepage" width="100"/> <webpage in="00:04:19:06" out="00:04:24:01" target="iframes" resourceid="celinehomepage" width="100"/> </webpages> </timeline></popcorn> == Getting involved ==We urge the video community to get involved and help with development in order to ensure an easy to use and adaptable library. There are many ways one can get involved; some include critiquing current work, filling out tickets/bugs, requesting additional functionality, spreading the word, and helping with documentation. Included below are ways to keep track of regarding popcorn.js.===== Download Source=====We have started a [https://github.com/webmademovies/popcorn-js GitHub repository ] feel free to fork from it or download the source.If you want to contribute the this is the [https://github.com/annasob/popcorn-js developer repository ]===== Workflow Guide=====The developer workflow guide can be found on [https://webmademovies.lighthouseapp.com/projects/63272/workflow Lighthouse]===== Issue Tracker=====We have started a Lighthouse [http://webmademovies.lighthouseapp.com/projects/63272/overview project]. It is public so feel free to add tickets. ===== IRC=====To get involved in the conversation or just stop by to see whats happening , visit the #popcorn channel at irc://moznet/popcorn ==First XML-based documentation page==To get something up quickly and see the power of Popcorn, you can try this example ([http://avnerd.tv/popcorndemo/ live here ]) which uses an XML file. When you have this set up, your root directory should contain:* .htaccess* index.html* popcorn.xml* style.css* popcorn.js * plugins directory from popcorn.js ===Set formats in .htaccess===Make sure that your .htaccess file on your server allows for the open video/audio formats by including:<pre>AddType audio/ogg .oggAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm</pre> ===Create the landing page (index.html)===<pre><!DOCTYPE html><html><head> <!-- Load popcorn.js and plugins you want to use --> <script src="popcorn.js"></script> <script src="plugins/wikipedia/popcorn.wikipedia.js"></script> <script src="plugins/webpage/popcorn.webpage.js"></script> <script src="plugins/googlemap/popcorn.googlemap.js"></script> <script src="plugins/footnote/popcorn.footnote.js"></script> <script src="plugins/twitter/popcorn.twitter.js"></script> <script src="plugins/subtitle/popcorn.subtitle.js"></script> <script src="plugins/googlenews/popcorn.googlenews.js"></script> <script src="plugins/tagthisperson/popcorn.tagthisperson.js"></script> <script src="plugins/wikipedia/popcorn.wikipedia.js"></script> <script src="plugins/flickr/popcorn.flickr.js"></script> <script src="plugins/attribution/popcorn.attribution.js"></script> <!-- Need an XML parser --> <script src="parsers/parserXML/popcorn.parseXML.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> <!-- These two are needed for google news api --> <script src="http://google.com/jsapi"></script> <script>google.load("elements", "1", {packages : ["newsshow"]});</script> <title>Popcorn Video Demo</title></head><body> <!-- Start Contents --> <div id="contents"> <!-- Start Left Contents --> <div class="left-content"> <!-- Start Video Div --> <br /> <div id="videoContainer" class="video-div"> <!-- You have to have an id in the video tag for Popcorn to work --> <video id="popcorn-this" src="JB_baby.ogg" data-timeline-sources="popcorn.xml" preload="auto" style="width:640px;" controls></video> </div><!-- End Video Div --> </div><!-- End Left Content --> <!-- Start Right Content --> <div class="right-content"> <h1>Wikipedia Target</h1> <div id="popcorn_box" class="popcorn_info"></div> <h1>Twitter Target</h1> <div id="twitter_box" class="popcorn_info"></div> <h1>Footnote Target</h1> <div id="footnote_box" class="popcorn_info"></div> </div><!-- End Right Content --> </div><!-- End Contents --> </body></html> </pre> ===Style Sheet (styles.css)===<pre>html, body{height: 100%;} body { line-height: 1; font-family: Helvetica, Arial, "Lucida Grande"; font-size: 15px;}a{ text-decoration: none; color: #cc433d;} a:hover{ color: #f27c77;} /* Layout */ body{ background-color: #fff;} .left-content{ width:680px; float: left; padding-left:0px; border: 1px dotted green;}.right-content{ float: left; border: 1px dotted gray; display: block; width:400px; padding-left:10px;}.full-content{ width:960px; padding-left:0px;} #popcorn_info{ position:relative; margin-bottom: 20px; margin-right: 20px; margin-left: 15px; clear: both;} video { border-radius: 12px; border: 1px solid black;}.video-div{ position:relative; margin-bottom: 20px; margin-right: 20px; margin-left: 15px; clear: both;}</pre> ===XML file (popcorn.xml)===<pre><popcorn> <manifest> <articles> <resource id="bieber" src="http://en.wikipediapopcornjs.org/wiki/Justin_Bieber" description="Beiber Wikipedia Article" lang="en"/> <resource id="london" src="http://en.wikipedia.org/wiki/London,_Ontario" description="London, Ontario" lang="en"/> </articles> </manifest> <timeline> <resources> <wikipedia in="00:00:01:01" out="00:00:06:00" resourceid="bieber" numberOfWords="350" target="popcorn_box"/> <wikipedia in="00:00:06:30" out="00:00:11:00" resourceid="london" numberOfWords="350" target="popcorn_box"/> <twitter in="00:00:00:01" out="00:03:00:00" src="#justinbieber" title="Bieber Tweets" target="twitter_box"/> </resources> <footnotes> <footnote in="00:00:01" out="00:29:00" target="footnote_box"><p>Custom Text in a footnote that uses html tags for things like<a href="http://en.wikipedia.org/wiki/Justin_Bieber"> links</a></p></footnote> </footnotes> </timeline></popcorn></pre> ===Tips and possible bugs=======Possible Bugs====* Need an id in the video tag to be able to target it with popcorn* It seems like you cannot access the same target with different resources - for example, I couldn't switch between sending Twitter and Footnotes to the same box as the Wikipedia====Tips====* you need to escape your html with entity tags in the footnote in order for it to work (CDATA might also work)* check your xml syntax by going to the page in a browser and making sure it is being read properly, a tag that's not closed, or a character in footnotes can really mess you up ==First JavaScript-based page==Unlike the XML method, the JavaScript way of using popcorn does not require multiple pages. ===Create the landing page (index.html)===<pre><!DOCTYPE html><html><head> <!-- Load popcorn.js and plugins you want to use --> <script src="popcorn.js"></script> <script src="plugins/wikipedia/popcorn.wikipedia.js"></script> <script src="plugins/webpage/popcorn.webpage.js"></script> <script> // ensure the DOM has loaded document.addEventListener('DOMContentLoaded', function () { // pass in the id of the video element below var p = Popcorn('#popcorn-this') .wikipedia({ start: 0, // seconds end: 10, // seconds src: 'http://en.wikipedia.org/wiki/Cape_Town', title: "this is an article", target: 'wikidiv' } ) .webpage({ id: "webpages-b", start: 0, // seconds end: 10, // seconds src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js', target: 'webpagediv' } ); }, false); </script> <title>Popcorn Video Demo</title></head><body> <!-- You have to have an id in the video tag for Popcorn to work --> <video id="popcorn-this" src="JB_baby.ogg" controls></video> <!-- The following divs must have matching id --> <div id="wikidiv"></div> <div id="webpagediv"></div></body></html></pre>== Making a plugin =====Document and Direectory Setup===Create a folder popcorn-js/plugins/PLUGIN_NAMECreate 4 files: popcorn.PLUGIN_NAME.html - The demo file, contains html to run plugin popcorn.PLUGIN_NAME.js - The code file, contains plugin popcorn.PLUGIN_NAME.unit.html - The demo test file, contains html test framework popcorn.PLUGIN_NAME.unit.js - The code test file, contains unit tests ===Making the plugin===Use the patterns from https://gist.github.com/844211#file_popcorn_plugin_patterns.js as a basis for plugin structure. Use pattern 2 unless plugin variables are required. Be sure to eliminate dependencies. A plugin should not require jQuery to run. Also the user should not have to add any extra <script> tags or any other HTML in order for the plugin to work.documentation
