PopcornOpenVideoAPI: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with '== Defining an Enhanced API for Video == ===== Abstract ===== The HTML5 specification introduces the <audio> and <video> media elements, and with them the opportuni…')
 
(Replaced content with "For all documentation regarding popcorn.js, visit the documentation page http://popcornjs.org/documentation")
 
(51 intermediate revisions by 5 users not shown)
Line 1: Line 1:
== Defining an Enhanced API for Video ==
For all documentation regarding popcorn.js, visit the documentation page http://popcornjs.org/documentation
 
===== Abstract =====
 
The HTML5 specification introduces the &lt;audio&gt; and &lt;video&gt; 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://scottdowne.blogspot.com blog])
* Daniel Hodgin ([http://twitter.com/dhhodgin @dhhodgin])
* Nick Cammarata
 
===== Other Contributors =====
 
* Brett Gaylor ([http://www.etherworks.ca EyeSteelFilm]/Mozilla Foundation,twitter: [http://twitter.com/remixmanifesto @remixmanifesto])
 
===== Status =====
 
'''This is a work in progress.'''
 
===== XML Grammar=====
 
We are trying to derived 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 identified would be repeating data (we called this the manifest):
Source
- ID
- Name of Work
- Copyright Holder
- License (free form text)
- License (machine readable URL)
 
Person
- URLs?? (twitter, facebook, flickr) and a Type
- Personal Info
- name (fullname)
- ID
- Title (job description)
- Salutation
- Role
 
Place
- Geotag (single)
- Type (building)
- URLs, type
- Name
- ID
 
Object
- ID
- Name
- URLS, Type
 
 
Here is what we cam up with for tags:
 
Text
-(for times when you want really fine control over placement of the text)
- x, y postion
- target div where it's going to get put
- class - font (css) -- class, css transitions (state and state and duration)
- effects - space separated
 
Subtitles
-Always at the bottom
 
Lower-Third Text (need a name)
- would need a default duration, but user configurable, and overridable
- in="x"
- Show
- Defaults (3 seconds)
- Person's Salutation + Name\n Title
- lower thirds
Subtitle
- text to display
- in="x" and out="y"
- position in lower area
Transctipt
- original language
- language its in
- name of person who is talking
- imported from external file
 
Credits
-<credit role="…" person="…">
-<credit role="…" person="…">
 
Attribution
- Name of Work, Copyright holder, License, License URL
- in="x" and out="x"
- lower third
- <attribution title="The Mona Lisa" by="Leonardo" license=">
- each
 
Caption
- (x,y) and (width,height)
- class (background, colour, etc.)
- text
- display:none until we show it
- in="x" and out="y"
- a <div> we put on the page
- <caption in="36" out="56 person="shaver">
 
Thought Bubble
- cloud with dots above the head
 
Speech Bubble
- straight lines like youtube
 
Pointer
- rectangle with arrow pointing to something
 
Picture
- specify a div for where to put the image
- img src
 
Data/Content
- something to load from external and show
- in="x" and out="y"
- src="…."
- target div to put it in
 
Audio
- src
- in="x" and out="y"
 
Change
- id of new div where to put it
- new size -- have it adopt the size of the div it is going into
 
Map
- in="x" and out="y" (if blank stay untill something replaces it)
- maybe specify map backend (google, open street map, bing)
- target div to put it in
- placeId linked back to <place>
 
 
===== Examples=====
We are using a short [http://www.drumbeat.org/content/web-made-movies-building-better-internet-video video] in order to build a demo showing of the above grammar. The structure of the demo will be based on [https://docs.google.com/a/eyesteelfilm.com/drawings/edit?id=17KM26tNZ3YzaisqSjJBJfMGxQ9KWgeAXrHmaUo-33Kc&pli=1 this wireframe]
 
Here is the data that will be used to describe the video. Of course the data uses the xml grammar described above.
 
 
  <manifest>
    <person id="celine" url="http://www.celinecelines.com/," name="Celine" salutation="Miss." >
      <url type="homepage" source="http://www.celinecelines.com/" description="Celine's Homepage" />
      <url type="twitter" source="http://twitter.com/celinecelines" description="Celine's Twitter />
    </person>
    <person id="brian" name="brian" >
      <url type="twitter" source="http://twitter.com/bchirls" description="Brian's twitter" />
    </person>
    <person id="mona" name="Mona" >
      <url type="homepage" source="http://monakasra.com/" description="Mona's Homepage"/>
    </person>
    <person id="dave" name="Dave" >
      <url type="twitter" source="http://twitter.com/academicdave" description="Dave's twitter" />
    </person>
    <person id="noah" name="Noah" >
      <url type="twitter" source="http://twitter.com/noahworkman" description="Noah's Twitter Feed" />
    </person>
    <place id="1" type="building" geotag="http://maps.google.ca/maps/place?cid=7207111453545228773&q=austin+convention+center&hl=en&cd=2&ei=dLQPTO6yOJzmNOCykZsD&dtab=0&sll=30.267153,-97.743061&sspn=0.583554,1.454315&ie=UTF8&ll=31.012925,-99.195557&spn=0,0&z=9&iwloc=B" name="">
    <place id="2" type="city" geotag="http://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=sao+paulo&sll=49.891235,-97.15369&sspn=27.954218,93.076172&ie=UTF8&hq=&hnear=S%C3%A3o+Paulo,+Brazil&z=9" url="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" name="Sao Paulo">
  </manifest>
 
  <timeline>
    <attribution id="3" in="00:00:36" nameOfWork="A Shared Culture" copyrightHolder="Jesse Dylan" license="CC-BY-NC"  licenseUrl="http://creativecommons.org/licenses/by-nc/2.0/">
    <subtitles>
      <subtitle in="00:00:05:00" out="00:00:07:00" effect="none" text="Hello! My name is Celines Celine">
      <subtitle in="00:00:07:00" out="00:00:09:00" effect="none" text="And I help the Internet be easier">
      <subtitle in="00:00:09:00" out="00:00:12:00" effect="none" text="by making things easier">
      <subtitle in="00:00:15:00" out="00:00:17:00" effect="none" text="My name is Mona Kasra">
      <subtitle in="00:00:17:00" out="00:00:18:00" effect="none" text="and I'm building a better internet">
    <subtitles>
    <map in="00:00:11:00" type="google" target="map" placeId="1">
    <map in="00:00:32:00" type="google" target="map" placeId="2">
    <data in="00:00:05:00" out="00:00:11:00" personId="celine" type="twitter">
    <data in="00:00:12:00" out="00:00:15:00" personId="brian" type="twitter">
    <data in="00:00:15:00" out="00:00:18:00" personId="mona" type="homepage">
    <data in="00:00:21:00" out="00:00:23:00" personId="dave" type="twitter">
    <data in="00:00:23:00" out="00:00:25:00" personId="noah" type="twitter">
  </timeline>

Latest revision as of 19:52, 1 November 2011

For all documentation regarding popcorn.js, visit the documentation page http://popcornjs.org/documentation

Retrieved from "https://wiki.mozilla.org/index.php?title=PopcornOpenVideoAPI&oldid=363283"