Hypermedia and the Annihilation of Time and Space
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 2 | |
| Number of Parts | 39 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/21665 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Montreal |
Content Metadata
| Subject Area | ||
| Genre | ||
| Keywords |
3
16
18
20
22
26
29
31
37
38
00:00
PixelInstallation artVideoconferencingWeb 2.0Sampling (music)Element (mathematics)Software frameworkMultiplication signDemo (music)FrequencyPresentation of a groupProjective planeTranslation (relic)BitGame theoryQuicksortDifferential (mechanical device)Meta elementComputer-assisted translationProper mapTerm (mathematics)CollaborationismContent (media)Conjugacy classHypermediaComputer architectureComputer fileSource codePoint (geometry)MereologyInteractive televisionInverter (logic gate)Endliche ModelltheorieMoment (mathematics)Image resolutionParticle systemQuery languageVideo gameNormal (geometry)Similarity (geometry)Line (geometry)Web browser
06:29
Execution unitReal numberHypermediaPoint (geometry)Sound cardInformationNeuroinformatikComputer fileSurfaceMereologyScheduling (computing)Audio file formatProgrammer (hardware)Set (mathematics)Element (mathematics)Flow separationMultiplication signReading (process)Frame problemVideo gameAdditionMaxima and minimaEmailLink (knot theory)Incidence algebraLine (geometry)QuicksortTranslation (relic)Formal languageBasis <Mathematik>WordAtomic numberContent (media)Demo (music)AreaVideoconferencingGame controllerSymmetry (physics)Web browserCASE <Informatik>Web 2.0Plug-in (computing)Open setFlash memoryTablet computerHeat transferQuery languageText editorSheaf (mathematics)Latent heatType theoryDifferent (Kate Ryan album)HypercubeGraphical user interfaceMobile appFunction (mathematics)System callArithmetic progressionWindowComputer animation
12:58
Computer animation
Transcript: English(auto-generated)
00:00
Hi. I have a couple of main goals with my presentation here, one of which is to try and use as many English terms of phrase without proper French conjugates as possible. So I have a little extra game going with my translation team here that can be kind
00:21
of a meta story going on here. But otherwise, I had some sort of grandiose notions before the conference of having a kind of comprehensive overview of some notions of time and the web and the browser, which ironically is the resource I'm kind of lacking here in
00:42
my lightning presentation. So I am going to kind of present a project to you that deals with these issues that I am not directly involved with but was fortunate enough to work on with Henrik Moltke from the Mozilla Foundation and a host of other collaborators
01:03
earlier this year. My name is Barry Thru. Normally, I work on a lot of interactive media projects and many of them are not for the web, a lot of architectural projections and interactive installations for museums and galleries and the like. And I find notions
01:23
of how these sorts of advanced media concepts are getting translated into the web extremely interesting. And this project is kind of both extremely useful and points the way
01:43
to some of the ways things are going, I think. And the framework that we were dealing with is this framework called PopcornJS. Let me see which side my monitor came up. There. I'm going right. Okay. That will work out for me. And we have terrible resolution here. One moment. I'm down to 800, 600. Okay. Well, we can deal with
02:06
that, I guess. We can deal with it, with it poorly. Success. Okay. So one of the issues
02:25
with the web is you have these kind of two separate things. You know, you have audio and video and media elements which have timelines. And the rest of the web is kind of this asynchronous, you know, event-driven model. And this PopcornJS framework is a fantastic
02:43
way to tie other media elements in with the timeline of video with HTML5. And later on we changed it to audio for some of our other demos. So if I find my mouse and play this. Time is a funny thing. Sometimes it seems to take so long. Especially when
03:09
you don't know where your mouse is. There we go. And so you'll see when I run this that we have a video timeline playing and in a arbitrary element here things happen
03:25
along the timeline. PopcornJS is an HTML5 video framework that lets you bring the web into your video. Which is kind of the whole idea. Let's try it. This video was shot in New Orleans. This one was shot in Cape Town. But you can pull up, you know, contextually related maps, articles. See how the content of the video can change the
03:43
footnotes or anything. This is Will Ferrell dancing to this exact song. So easy. One of the ways to get started here. Here's another example, first of all. Which is kind of a more, there's a lot more going on here. This is sort of
04:11
Donald Duck's remix video. Where there's some things that are recontextualized, you know, about this video. It's a little bit of a remix of the original intention.
04:22
Do you feel like you're working harder and harder these days just to stay financially afloat while fat cats get richer and richer? It's not just a feeling and you're not alone.
04:43
The income gap between rich and poor in America is at an 80 year high. That's the largest differential since the period immediately preceding the Great Depression. The haves are getting more while the have nots are getting less. Meanwhile, government isn't helping decades of rising inequality.
05:11
So we could just watch that, but I'm going to show you how this works briefly. The demos we put together, this kind of thing is extremely easy when you're
05:21
dealing, it just deals with the HTML5 video tag. And so basically there are just a couple of parts of this framework. You include your popcorn JS and it uses jQuery to do all the kind of interactions. And then past that point, this is the demo for audio.
05:44
We use this JPlayer player to do the audio samples. But on a normal video, all you have to do is include in your HTML5 video tag a couple of this data timeline sources file, which can be a JSON or XML or inline
06:10
and the path to your movie and the video tag. So with that and popcorn, you then have a third file
06:27
that has in and out points and kind of the content you want to appear. This can be broken up into sections in the XML file or JSON. And then you have several popcorn plugins that can be written for it.
06:44
In this case, something like timeline, which then there are literally just jQuery calls in here to change elements as the timeline progresses.
07:00
So the first demo we put together was for a radio show called Hyper Diskin that Henrik used to work on. And if I just play this, we have several things happening here. One of which is there's a transcript that moves along with the show,
07:27
content-related footnotes, media links, and then a highlighted transcript down here, which doesn't appear to be working. It's probably a Chrome thing. But if I were to click on one of these,
07:43
then we can jump to the section in the audio button. Sorry. I'm back. I'm behind that thing.
08:03
Clickable timeline to jump to places in the audio, several elements that go along with the timeline, language changing to a different translation and audio file of the same radio show.
08:23
And then we've kind of gone onward to make this demo for a show called Radiolab. I'm not sure if anybody's familiar with it, which is kind of an interesting show for this type of content
08:41
because I don't know if anybody's seen the show live or anything, but there are different elements remixed and dispersed along with the timeline all the time. And what happened, we met with Jad and Robert from Radiolab a little earlier this year and came up with something that integrates
09:01
the SoundCloud player along with the Radiolab show. This show was called Desperately Seeking Symmetry. And the way this works is people can... Let me see if I can get this in frame here. I can. Barely.
09:20
I can submit SoundCloud... Now I can't actually start it because my window's over here. I won't go back. There we go. People can submit images and link them to the SoundCloud timeline, and if they like them and think they have some curatorial control over the show,
09:41
and if it seems like a relevant thing, they can bring it up in the video. So we have something like... Wait, you're listening. You're listening to Radiolab. Radiolab. From... WNYC.
10:01
C? And NPR. Hey, I'm Chad Aboumran. I'm Robert Krowitch. This is Radiolab, and today we are Desperately Seeking Symmetry. And of course we can jump in the timeline and see where we're at with all of our elements.
10:23
Is this the same picture? This is the same picture. Go back to the other picture. There's Abe. Now do the other one. Do you see? That's so weird. Now, here's the thing. Okay, and so the nice thing about this, obviously, is that, you know, no Flash, all open tools,
10:41
concept of timeline in the browser. I know this was extremely quick. There is, I guess one final thing I want to note, that they're working on an app called Butter, which is a timeline editor, an on-web timeline editor for these things. You can output your XML or JSON timeline files.
11:02
Anyway, a thing I think is super interesting, a thing I would like to see integrated further into the browser in like a more robust way, some sort of scheduling. If anybody's interested in, you know, knowing more about it or how to use it, come find me. I'll be out there somewhere. And this is me, and that's about it.
11:23
Thanks for listening. Thank you. Quick comment, questions? Dude, I covered it all. No, it's gone.
11:43
One question, then. I'm probably one of the few people here that's not a programmer. I was just curious, how were you, in your first video, how was all the information getting added to the video stream, like the cartoon? Was that all being manually added? With the video stream? I mean, it was manually added at some point, yes.
12:06
So there's a big file that has the footers and subnotes and additions and other frames delineated in it.
12:22
And so like Wikipedia links, you'd add the link at a specific timeline point, and when the video passed that point, it pops up. Certainly I can imagine other things being pulled in more indirect ways than that.
12:44
But WebGL, you can imagine moving anything or drawing anything with some sort of timeline concept. Thank you.
Recommendations
Series of 13 media