PopcornChat1A

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)