hello - we're going to start the P2PU course chat on Popcorn in a few minutes
12:52 humph great
12:52 ndoiron hopefully we have some experienced WMM people here, too?
12:52 humph everyone, meet ndoiron, who is running the p2pu popcorn course
12:53 humph annasob, benmoskowitz, jbuck, scott, secretrobotron ^^
12:53 humph ndoiron is going to have his group join the channel today
12:53 humph is just documenting popcorn stuff, will be around
12:53 annasob hey ndoiron thanx for taking on p2p
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
12:55 ndoiron hopefully in the P2PU course we're going to see a lot of cool examples
12:55 ndoiron I was planning the chat to be an open Q&A, then going over an example which I posted at http://jsfiddle.net/tNhyt/4/
12:56 humph nice
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
12:58 humph ndoiron: changed a couple things
12:58 ndoiron when you change the page you can click "Update" on the top bar to get a new URL
12:58 humph http://jsfiddle.net/tNhyt/5/
12:59 humph ndoiron: what's your twitter nick?
12:59 *** annasob is now known as annasob_lunch
12:59 *** Deiren joined #popcorn
13:00 *** dmose joined #popcorn
13:00 ndoiron humph: haven't used Twitter much in the past year
13:00 *** justinstoller quit (Quit: http://www.mibbit.com ajax IRC Client)
13:00 humph k
13:00 ndoiron okay I'll give people a few minutes before we start
13:01 ndoiron I know Deiren is from the course. Hi !
13:01 Deiren hi yes here
13:01 *** boaz joined #popcorn
13:03 ndoiron Mozilla folks: you can read about the course participants on our sign-up page http://new.p2pu.org/en/groups/interactive-open-video-with-popcornjs/content/sign-up/
13:03 ndoiron we've got a good mix of technical and non-technical people
13:03 deimidis ndoiron, I'm from the course too
13:03 *** njames quit (Connection reset by peer)
13:03 *** njames joined #popcorn
13:03 humph nice
13:03 humph welcome to all
13:05 ndoiron okay - let's start now and welcome people if they join late
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
Welcome P2PU! "A channel for discussions about the popcorn.js open video library: http://www.popcornjs.org | Bug tracker: https://webmademovies.lighthouseapp.com/projects/63272-popcorn-js/overview | Style Guide: https://gist.github.com/793649 | Workflow: https://webmademovies.lighthouseapp.com/projects/632
Topic set by humph on Thu May 05 2011 13:06:39 GMT-0300 (Montevideo Standard Time)
13:07 *** cdes_ is now known as cdes_lunch
13:07 ndoiron Deiren and deimidis, could you say a thing or two about your ideas for interactive videos?
13:07 *** justinstoller joined #popcorn
13:07 ndoiron other P2PU people, introduce yourselves too
13:08 humph is David Humphrey, one of the leads of the popcorn project
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
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
13:09 deimidis worked with popcorn at Drumbeat Festival last year at Barcelona
13:10 ndoiron deimidis: have you seen http://googleblog.blogspot.com/2010/08/arcade-fire-meets-html5.html ? that's what I think of for interactive music video
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...
13:10 deimidis that time helping with CSS. And I'm part of a project for Mozilla and Journalism challenges
13:11 deimidis ndoiron, yes, I saw it. And the demo from developer.mozilla.org (the puzzle when video is playing)
13:12 deimidis ndoiron, this video https://developer.mozilla.org/es/demos/detail/gamits-parts
13:12 ndoiron and the Mozilla Journalism challenge that deimidis mentioned, the first challenge was about open video
13:12 ndoiron I think a lot of these open web projects are connecting back to the need for cool video presentations
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 -
13:14 ndoiron I'm not familiar with that - is it like a choose-your-adventure story?
13:15 Deiren In a way but not exactly - http://www.bigspaceship.com/portfolio/hbo-voyeur/ link ---
13:16 secretrobotron a little late, but welcome p2pu
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
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
13:19 Deiren really interested in interactive music video also
13:20 ndoiron since we have a few of the official Popcorn team members here, it'd be a great opportunity to ask questions
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?
13:22 humph I don't know how many of you have seen the demo secretrobotron and I worked on recently, https://hacks.mozilla.org/2011/03/nocomply/
13:23 humph one of the things I'm excited about is mixing video, 3D (WebGL), 2D animations, live web content, etc
13:23 humph we did the same sort of thing with http://vocamus.net/dave/?p=1233
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
13:24 humph http://vocamus.net/dave/?p=1309 is another demo secretrobotron and I did recently
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.
13:24 humph it shows mixing video and rich media with popcorn
13:26 *** benmoskowitz__ joined #popcorn
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?
13:27 ndoiron that'd be a good starting point to hack on it
13:27 humph secretrobotron did something like that, yes
13:28 humph but I agree webgl stuff is not the right place to start
13:28 humph you can do a ton without needing 3D
13:28 *** benmoskowitz__ quit (Ping timeout)
13:28 secretrobotron ndoiron: http://robothaus.org/Popcorn-with-Brendan/3dpopcorn.html
13:28 secretrobotron but, i think our latest demo really strikes your point
13:29 secretrobotron popcorn-in-the-planetarium is a good clash of web technologies with an educational purpose
13:29 humph are people in the group pretty new to irc?
13:30 humph don't feel like you can't ask stuff or otherwise speak up
13:31 *** brett joined #popcorn
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
13:31 humph those rectangles can contain anything the web can contain: whole web pages, images, data from twitter, maps from google, whatever
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)
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
13:32 *** brett_ joined #popcorn
13:32 humph deimidis: in that demo we are using a youtube flash video plugin for popcorn in order to demonstrate how it works
13:32 humph but it could just have easily been html5 video
13:32 deimidis humph, ok, thanks!
13:33 humph popcorn takes care of figuring out the differences between different media types
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 -
13:33 humph Deiren: cool
13:33 brett hi all!
13:33 humph meet brett, he leads Web Made Movies, of which Popcorn.js is a part
13:34 ndoiron thank you for joining our P2PU course chat
13:34 brett greetings! just getting going here on the west coast
13:34 brett ndoiron thanks for putting it together!
13:34 humph ndoiron++
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
13:34 *** cdes_lunch is now known as cdes_
13:35 ndoiron like an animated graffiti or a Google Earth tour
13:35 humph right
13:35 humph we have something called player plugins
13:35 humph these allow us, or you, to create new types of media backends for popcorn.js to use
13:35 Deiren hi Brett
13:35 secretrobotron ndoiron: that's an interesting point
13:35 humph we convert their interface so that it works like an html5 video
13:36 brett Hi Deiren!
13:36 humph secretrobotron: ndoiron has done some great work with maps and popcorn
13:36 secretrobotron it opens up popcorn to being acceptable as an event driver for things like games
13:36 secretrobotron ndoiron, humph: do you have some links?
13:36 humph secretrobotron: see the OpenStreet Maps bugs
13:36 humph he wrote that stuff
13:37 secretrobotron ah, i know you well then
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
13:38 ndoiron okay, so I was going to suggest doing a walk-through of a Popcorn example
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
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
13:40 Deiren sounds good to me
13:40 deimidis perfect
13:40 justinstoller awesome
13:40 ndoiron http://jsfiddle.net/tNhyt/5/
13:41 ndoiron so the really interesting part of this example is in the JavaScript section (bottom left)
13:42 ndoiron I send Popcorn the location of the <video> tag
13:43 humph where location is the ID (unique name) of the element in the page
13:43 *** boaz quit (Ping timeout)
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
13:44 ndoiron then there are several properties that I send to Popcorn's image plugin
13:44 ndoiron start and end are pretty straightforward - they're when the image appears and disappears
13:45 *** brett_ quit (Quit: brett_)
13:45 humph are people familar with JavaScript's object notation?
13:45 humph {start: 1, end: 10...}
13:45 humph ?
13:45 justinstoller yes
13:45 *** Boozeniges joined #popcorn
13:45 deimidis YES
13:45 deimidis sorry
13:45 humph haha
13:46 ndoiron I'll also add that src is the URL of the image that appears
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
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
13:48 Deiren JS is weakness - need to learn/improve
13:48 deimidis ndoiron, is this site share? Do my changes affect everyone?
13:48 humph Deiren: lots of people who can help you here if you have questions
13:49 ndoiron the changes only appear to you when you click Run, and you get a new URL when you click Update
13:49 Deiren great thanks - yes made changes and it's running them
13:51 Deiren oops changed back - do my changes affect everyone?
13:52 ndoiron no. Your changes aren't saved until you click "Update" and that gives you a new URL
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
13:54 ndoiron and like it says on that example, you can get more short videos at Wikimedia Commons
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
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
13:56 deimidis ndoiron, the image and the text that appear are inside a canvas object?
13:58 ndoiron I just checked, it's an img object, so just <img src="____"/>
13:59 deimidis ndoiron, ok, I tried to change CSS of the text inside, but i couldn't do it
14:00 ndoiron it looks like the image plugin sets some CSS: text-align: center; font-size: 23.5px; color: black; font-weight: bold;
14:01 *** lsblakk|afk is now known as lsblakk
14:01 ndoiron so any text that you send to this image plugin is going to be black, hmm
14:02 deimidis sorry, i'm using nightly firefox and firebug doesn't work. don't worry
14:02 ndoiron I think they should change the image plugin so it doesn't make assumptions like black text
14:02 *** justinstoller quit (Quit: http://www.mibbit.com ajax IRC Client)
14:02 ndoiron another thing I was going to point out is that text and href are optional
14:03 ndoiron so you can just remove those lines
14:03 *** justinstoller joined #popcorn
14:05 ndoiron okay we've been here for an hour -- sorry if the technical part seemed rushed
14:05 ndoiron you can do a lot with that example
14:05 ndoiron and the other plugins look very similar, on the code side
14:07 deimidis where's doc for plugins?
14:07 Deiren question - is it important to add the type='video/ogg; codecs="theora, vorbis" for the different codecs
14:07 justinstoller sorry for dropping, I have a quick question, I don't see image in the docs
14:07 humph deimidis: being written now
14:10 humph deimidis: http://popcornjs.org/plugins
14:10 humph is a start
14:10 secretrobotron Deiren: while different browsers support different codecs, it's important for now
14:10 secretrobotron firefox uses video/ogg, safari uses video/mp4 i believe, etc.
14:11 ndoiron firefox also has webm
14:11 Deiren secretrobotron: thanks
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
14:11 secretrobotron exactly
14:11 secretrobotron so being explicit works well for now
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 --?
14:16 Boozeniges Deiren : https://developer.mozilla.org/en/javascript is always a good start for the syntax
Deiren Boozeniges: thanks
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
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"
14:20 secretrobotron it's a great resource for developers (i use it all the time)