a guest May 9th, 2011 115 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. hello - we're going to start the P2PU course chat on Popcorn in a few minutes
  2. 12:52   humph   great
  3. 12:52   ndoiron hopefully we have some experienced WMM people here, too?
  4. 12:52   humph   everyone, meet ndoiron, who is running the p2pu popcorn course
  5. 12:53   humph   annasob, benmoskowitz, jbuck, scott, secretrobotron ^^
  6. 12:53   humph   ndoiron is going to have his group join the channel today
  7. 12:53           humph is just documenting popcorn stuff, will be around
  8. 12:53   annasob hey ndoiron thanx for taking on p2p
  9. 12:54   ndoiron I think there's a lot of interest in HTML5 video and Popcorn is making it accessible to a lot more people
  10. 12:55   ndoiron hopefully in the P2PU course we're going to see a lot of cool examples
  11. 12:55   ndoiron I was planning the chat to be an open Q&A, then going over an example which I posted at
  12. 12:56   humph   nice
  13. 12:57   ndoiron it's possible to change up that page and understand how to work with Popcorn without knowing how to write the whole thing from scratch
  14. 12:58   humph   ndoiron: changed a couple things
  15. 12:58   ndoiron when you change the page you can click "Update" on the top bar to get a new URL
  16. 12:58   humph
  17. 12:59   humph   ndoiron: what's your twitter nick?
  18. 12:59           *** annasob is now known as annasob_lunch
  19. 12:59           *** Deiren joined #popcorn
  20. 13:00           *** dmose joined #popcorn
  21. 13:00   ndoiron humph: haven't used Twitter much in the past year
  22. 13:00           *** justinstoller quit (Quit: ajax IRC Client)
  23. 13:00   humph   k
  24. 13:00   ndoiron okay I'll give people a few minutes before we start
  25. 13:01   ndoiron I know Deiren is from the course.  Hi !
  26. 13:01   Deiren  hi yes here
  27. 13:01           *** boaz joined #popcorn
  28. 13:03   ndoiron Mozilla folks: you can read about the course participants on our sign-up page
  29. 13:03   ndoiron we've got a good mix of technical and non-technical people
  30. 13:03   deimidis        ndoiron, I'm from the course too
  31. 13:03           *** njames quit (Connection reset by peer)
  32. 13:03           *** njames joined #popcorn
  33. 13:03   humph   nice
  34. 13:03   humph   welcome to all
  35. 13:05   ndoiron okay - let's start now and welcome people if they join late
  36. 13:06   ndoiron I'm Nick, I'm run the P2PU group, and this is our first time chatting with the course - hope to answer questions and introduce you to Popcorn today
  37. Welcome P2PU! "A channel for discussions about the popcorn.js open video library: | Bug tracker: | Style Guide: | Workflow:
  38. Topic set by humph on Thu May 05 2011 13:06:39 GMT-0300 (Montevideo Standard Time)
  39. 13:07           *** cdes_ is now known as cdes_lunch
  40. 13:07   ndoiron Deiren and deimidis, could you say a thing or two about your ideas for interactive videos?
  41. 13:07           *** justinstoller joined #popcorn
  42. 13:07   ndoiron other P2PU people, introduce yourselves too
  43. 13:08           humph is David Humphrey, one of the leads of the popcorn project
  44. 13:09   deimidis        I was very interested in popcorn since I read about it. I'm trying to figure out interesting ways to use videos in the web. And maybe help a friend with his muscial shows
  45. 13:09   justinstoller   hello, I'm Justin. I've been working with a friend of mine for about a year now on learning web development, I'm really excited about furthering my HTML5 and Javascript abilities
  46. 13:09   deimidis         worked with popcorn at Drumbeat Festival last year at Barcelona
  47. 13:10   ndoiron deimidis: have you seen ? that's what I think of for interactive music video
  48. 13:10   Deiren  Great to be here Nick -- my first intro into what HTML5 could do with video was that incredible Arcade Fire google earth experience that Chris Milk did for google chrome...beyond that I've just been seeing some of the great new possibilities that you're doing with popcorn.js recently...
  49. 13:10   deimidis        that time helping with CSS. And I'm part of a project for Mozilla and Journalism challenges
  50. 13:11   deimidis        ndoiron, yes, I saw it. And the demo from (the puzzle when video is playing)
  51. 13:12   deimidis        ndoiron, this video
  52. 13:12   ndoiron and the Mozilla Journalism challenge that deimidis mentioned, the first challenge was about open video
  53. 13:12   ndoiron I think a lot of these open web projects are connecting back to the need for cool video presentations
  54. 13:13   Deiren  I really want to explore some storytelling abilities with HTML5 and video --- pre HTML5 I might be able to name a handful of interactive video experiences that I really found compelling -- like the Voyeur HBO project that a group called Big Spaceship did -
  55. 13:14   ndoiron I'm not familiar with that - is it like a choose-your-adventure story?
  56. 13:15   Deiren  In a way but not exactly -   link ---
  57. 13:16   secretrobotron  a little late, but welcome p2pu
  58. 13:16   justinstoller   I've been learning a lot from tutorials/screencasts and have been hoping to see screencasts become more interactive with the video element/javascript
  59. 13:18   Deiren  Nice to meet you David and Justin -- interesting we had the same inclination to highlight arcade fire html5 - so emotionally compelling I guess
  60. 13:19   Deiren  really interested in interactive music video also
  61. 13:20   ndoiron since we have a few of the official Popcorn team members here, it'd be a great opportunity to ask questions
  62. 13:22   justinstoller   we've mentioned a few things we found compelling/directions we'd like to go with popcorn/video do you guys have any personal favorites or specific things you want to see video do?
  63. 13:22   humph   I don't know how many of you have seen the demo secretrobotron and I worked on recently,
  64. 13:23   humph   one of the things I'm excited about is mixing video, 3D (WebGL), 2D animations, live web content, etc
  65. 13:23   humph   we did the same sort of thing with
  66. 13:24   humph   I'm excited by the idea of mixng media types on the web, and popcorn can be used to do this really well
  67. 13:24   humph is another demo secretrobotron and I did recently
  68. 13:24   secretrobotron  that definitely seems to be the theme lately. people want to see WebGL+popcorn+video do what flash used to be king at.
  69. 13:24   humph   it shows mixing video and rich media with popcorn
  70. 13:26           *** benmoskowitz__ joined #popcorn
  71. 13:26   ndoiron WebGL is cool but has a steep learning curve... is it possible for there to be a simple example that just makes the video screen and lets us move it around in 3D space?
  72. 13:27   ndoiron that'd be a good starting point to hack on it
  73. 13:27   humph   secretrobotron did something like that, yes
  74. 13:28   humph   but I agree webgl stuff is not the right place to start
  75. 13:28   humph   you can do a ton without needing 3D
  76. 13:28           *** benmoskowitz__ quit (Ping timeout)
  77. 13:28   secretrobotron  ndoiron:
  78. 13:28   secretrobotron  but, i think our latest demo really strikes your point
  79. 13:29   secretrobotron  popcorn-in-the-planetarium is a good clash of web technologies with an educational purpose
  80. 13:29   humph   are people in the group pretty new to irc?
  81. 13:30   humph   don't feel like you can't ask stuff or otherwise speak up
  82. 13:31           *** brett joined #popcorn
  83. 13:31   humph   I think the best way to think about the web and popcorn is that you have a canvas where you can put rectangles, and you can stack them on top of each other, hide them, move them, etc. and time any of that to things in the video
  84. 13:31   humph   those rectangles can contain anything the web can contain: whole web pages, images, data from twitter, maps from google, whatever
  85. 13:32   deimidis        in the planetarium example, i see the video on flash, how could I change that (or this is the way to see it)
  86. 13:32   humph   sometimes the stuff in them will be static (e.g., you type it out and it never changes) and sometimes you'll hook things up to remote data services
  87. 13:32           *** brett_ joined #popcorn
  88. 13:32   humph   deimidis: in that demo we are using a youtube flash video plugin for popcorn in order to demonstrate how it works
  89. 13:32   humph   but it could just have easily been html5 video
  90. 13:32   deimidis        humph, ok, thanks!
  91. 13:33   humph   popcorn takes care of figuring out the differences between different media types
  92. 13:33   Deiren  all the links you've placed are amazing - but it's like seeing stuff with new eyes so I'm really in absorbing mode-- it is some new ground. I love the possibilities of mixing media types and bringing in live web content and playing with that across the time line -
  93. 13:33   humph   Deiren: cool
  94. 13:33   brett   hi all!
  95. 13:33   humph   meet brett, he leads Web Made Movies, of which Popcorn.js is a part
  96. 13:34   ndoiron thank you for joining our P2PU course chat
  97. 13:34   brett   greetings! just getting going here on the west coast
  98. 13:34   brett   ndoiron thanks for putting it together!
  99. 13:34   humph   ndoiron++
  100. 13:34   ndoiron on the YouTube/Flash question... Popcorn has HTML5, YouTube, and Vimeo players, plus they're open to non-video items being players too
  101. 13:34           *** cdes_lunch is now known as cdes_
  102. 13:35   ndoiron like an animated graffiti or a Google Earth tour
  103. 13:35   humph   right
  104. 13:35   humph   we have something called player plugins
  105. 13:35   humph   these allow us, or you, to create new types of media backends for popcorn.js to use
  106. 13:35   Deiren  hi Brett
  107. 13:35   secretrobotron  ndoiron: that's an interesting point
  108. 13:35   humph   we convert their interface so that it works like an html5 video
  109. 13:36   brett   Hi Deiren!
  110. 13:36   humph   secretrobotron: ndoiron has done some great work with maps and popcorn
  111. 13:36   secretrobotron  it opens up popcorn to being acceptable as an event driver for things like games
  112. 13:36   secretrobotron  ndoiron, humph: do you have some links?
  113. 13:36   humph   secretrobotron: see the OpenStreet Maps bugs
  114. 13:36   humph   he wrote that stuff
  115. 13:37   secretrobotron  ah, i know you well then
  116. 13:37   ndoiron I don't have a link to the non-video player plugins, but I remember some ideas popping up on the site
  117. 13:38   ndoiron okay, so I was going to suggest doing a walk-through of a Popcorn example
  118. 13:39   ndoiron most P2PU people in this chat are technical, hopefully we'll get to some non-technical people too, and in the second chat
  119. 13:40   ndoiron I made a simple example where it shows an image partway through the video - sort of a "Hello World" example - which you can edit and take in different directions
  120. 13:40   Deiren  sounds good to me
  121. 13:40   deimidis        perfect
  122. 13:40   justinstoller   awesome
  123. 13:40   ndoiron
  124. 13:41   ndoiron so the really interesting part of this example is in the JavaScript section (bottom left)
  125. 13:42   ndoiron I send Popcorn the location of the <video> tag
  126. 13:43   humph   where location is the ID (unique name) of the element in the page
  127. 13:43           *** boaz quit (Ping timeout)
  128. 13:44   ndoiron right.  You can see in the top left section (HTML) there's two lines that say <video id="video" -- so "video" is the ID we send to Popcorn
  129. 13:44   ndoiron then there are several properties that I send to Popcorn's image plugin
  130. 13:44   ndoiron start and end are pretty straightforward - they're when the image appears and disappears
  131. 13:45           *** brett_ quit (Quit: brett_)
  132. 13:45   humph   are people familar with JavaScript's object notation?
  133. 13:45   humph   {start: 1, end: 10...}
  134. 13:45   humph   ?
  135. 13:45   justinstoller   yes
  136. 13:45           *** Boozeniges joined #popcorn
  137. 13:45   deimidis        YES
  138. 13:45   deimidis        sorry
  139. 13:45   humph   haha
  140. 13:46   ndoiron I'll also add that src is the URL of the image that appears
  141. 13:46   humph   for anyone who isn't, you can write an object literal in JS by doing {}, and then give property names and values for them using name: value
  142. 13:47   ndoiron when you change those values, and click "Run" on the top of the page, you can see the result of your changes
  143. 13:48   Deiren  JS is weakness - need to learn/improve
  144. 13:48   deimidis        ndoiron, is this site share? Do my changes affect everyone?
  145. 13:48   humph   Deiren: lots of people who can help you here if you have questions
  146. 13:49   ndoiron the changes only appear to you when you click Run, and you get a new URL when you click Update
  147. 13:49   Deiren  great thanks - yes made changes and it's running them
  148. 13:51   Deiren  oops changed back - do my changes affect everyone?
  149. 13:52   ndoiron no.  Your changes aren't saved until you click "Update" and that gives you a new URL
  150. 13:52   ndoiron if you change the time of the video, like jump into and out of the time when the image appears, Popcorn updates the page too
  151. 13:54   ndoiron and like it says on that example, you can get more short videos at Wikimedia Commons
  152. 13:55   ndoiron it's a big step for a first example, especially if you're learning JavaScript, but I hope it's easy to make changes
  153. 13:56   ndoiron if you can't see the video or your changes don't work, click Update and send us a link to your page
  154. 13:56   deimidis        ndoiron, the image and the text that appear are inside a canvas object?
  155. 13:58   ndoiron I just checked, it's an img object, so just <img src="____"/>
  156. 13:59   deimidis        ndoiron, ok, I tried to change CSS of the text inside, but i couldn't do it
  157. 14:00   ndoiron it looks like the image plugin sets some CSS:  text-align: center; font-size: 23.5px; color: black; font-weight: bold;
  158. 14:01           *** lsblakk|afk is now known as lsblakk
  159. 14:01   ndoiron so any text that you send to this image plugin is going to be black, hmm
  160. 14:02   deimidis        sorry, i'm using nightly firefox and firebug doesn't work. don't worry
  161. 14:02   ndoiron I think they should change the image plugin so it doesn't make assumptions like black text
  162. 14:02           *** justinstoller quit (Quit: ajax IRC Client)
  163. 14:02   ndoiron another thing I was going to point out is that text and href are optional
  164. 14:03   ndoiron so you can just remove those lines
  165. 14:03           *** justinstoller joined #popcorn
  166. 14:05   ndoiron okay we've been here for an hour -- sorry if the technical part seemed rushed
  167. 14:05   ndoiron you can do a lot with that example
  168. 14:05   ndoiron and the other plugins look very similar, on the code side
  169. 14:07   deimidis         where's doc for plugins?
  170. 14:07   Deiren  question - is it important to add the type='video/ogg; codecs="theora, vorbis" for the different codecs
  171. 14:07   justinstoller   sorry for dropping, I have a quick question, I don't see image in the docs
  172. 14:07   humph   deimidis: being written now
  173. 14:10   humph   deimidis:
  174. 14:10   humph   is a start
  175. 14:10   secretrobotron  Deiren: while different browsers support different codecs, it's important for now
  176. 14:10   secretrobotron  firefox uses video/ogg, safari uses video/mp4 i believe, etc.
  177. 14:11   ndoiron firefox also has webm
  178. 14:11   Deiren  secretrobotron: thanks
  179. 14:11   ndoiron chrome has webm and ogg... mp4 was in there, they took it out, Microsoft put it back in... it's a mess
  180. 14:11   secretrobotron  exactly
  181. 14:11   secretrobotron  so being explicit works well for now
  182. 14:16   Deiren  could anyone suggest a good starting point resource(s) where I can get some javascript basics down over the next week -- links --?
  183. 14:16   Boozeniges      Deiren : is always a good start for the syntax
  184. Deiren  Boozeniges: thanks
  185. ndoiron I've got to go -- thanks for participating, everyone!  I'm going to try covering the same material later in the day, for people who can't be online now
  186. 14:20   secretrobotron  Deiren: in general, if you're curious about any aspect of javascript/html, search for it on google along with the acronym "mdc"
  187. 14:20   secretrobotron  it's a great resource for developers (i use it all the time)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand