Bursting open HTML5 media with Popcorn Maker
•Als PPTX, PDF herunterladen•
2 gefällt mir•4,902 views
Web video has historically been a black box, isolated from other content. HTML5 breaks that box by enabling interaction among media, other content, and the user. See examples of the potential of HTML5 video for techcomm. See a demo of Popcorn Maker, an alpha-release Web-based GUI tool that enables non-programmers to harness the interactive power of HTML5 video.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Bursting open HTML5 media with Popcorn Maker
Ähnlich wie Bursting open HTML5 media with Popcorn Maker (20)
Mehr von Janet Swisher
Mehr von Janet Swisher (7)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Bursting open HTML5 media with Popcorn Maker
- 1. Bursting open HTML5 media with Popcorn Maker STC Summit, Beyond the Bleeding Edge May 23, 2012 Janet Swisher, Mozilla @jmswisher #popcornjs
- 2. Video in HTML(4) Photo by Abode of Chaos
- 3. What’s cool about HTML5 media Photo by Dominic’s pics
- 4. What’s not so cool Photo by
- 8. Why this is cool for tech comm
- 12. But you still need …. Photo by deltaMike
- 13. Even cooler: Popcorn Maker http://mozillapopcorn.org
- 15. More about PopcornJS & Popcorn Maker • Try it: http://mozillapopcorn.org/popcorn-maker/ • Discuss it: https://mail.mozilla.org/listinfo/community-popcorn • Follow: http://twitter.com/popcornjs
- 16. Thanks!
Hinweis der Redaktion
- I’m a technical writer and community steward for Mozilla. I’m here to talk about a Mozilla project that I’m not directly involved in, but that I think has a huge potential for technical communication, which is Popcorn Maker, a GUI tool for creating interactive HTML5 video experiences.
- Video on the Web prior to HTML5 was a mysterious black box. There was a strict boundary between the video, which needed a separate plug-in in order to play, and the rest of the Web content. So, if you wanted interactivity, you had to let the plug-in take over the whole page. Plug-ins can also cause crashes and security issues, which are not good for anybody.
- Media in HTML5 are “of the Web”, as first-class HTML tags, interconnected with other web contentNo more plug-ins! (well, except as a fall-back)Programmatic control in JavaScript; this is huge.
- However, the HTML5 specs for audio and video, are very granular, so you have to start from scratch each time you want to present multimedia content.
- JS library providing an event system for HTML5 media, “jQuery for video”GUI programming is typically event-driven, so this is a familiar paradigm for programmersIt’s modular, so developers can add libraryplug-ins for common services YouTube, Vimeo, etc.TwitterGoogle MapsAnd many more
- Since I’m presenting on a standard, conference-provided laptop over the conference network, I wasn’t certain that there would be good bandwidth, or even a browser that supports HTML5 video. I made videos of these videos.
- Note that the Twitter feed is live (or was when I made the video).
- Media is now a two-way streetMedia can affect other content, so you can tie it together with all your other web-based content.User interaction with other content can affect media
- This is a audio-based course. Note the table of contents that lets you jump to specific topics within the audio track.Also note that the main content display is just HTML; you can copy and paste what’s displayed there.
- In this demo, you have a video of a performance of MacBeth, with the text that’s being spoken (with an optional modern translation); you have a glossary of difficult phrases, and you can click to go to the section of the video that uses them. You can also advance the video, and still get a gloss on the difficult terms you find.The Notes section describes how these elements are defined in a simple structured text file, to make it easy for the instructor to create the linked content.
- In this example, you have a social layer augmenting an instructional video. As the video progresses, you can see the questions that other people have posted about the video content, and the answers that others have given. You can also post your own question. You can click a particular question, and jump to the part of the video that it’s associated with. You can also rate whether the questions are good and the answers are useful. And you can post an answer of your own; the video pauses when you click that, so that it’s not continuing while you’re typing.
- That’s all very cool, but because it’s a JavaScript library you still need a programmer.Often, techcomm doesn’t have budget for that, either hard or soft budget.
- Templates define:Layout of display areasTypes of content that can be put into those areasThis template has a video, and two content areas below that.Popcorn Maker uses a track metaphor for placing specific content with specific durations.This template supports footnotes, images, webpages and wikipedia articles.You can drag new content onto a track, and then drag it to position it in the timeline, and adjust the start and end points.Double-click to open the property editor.You can set the start and endpoint explicitly, and set other properties. The exact set of properties varies according to the content type.Use the slider to view what will be displayed at any point in the timeline.Or click Play to just let it run.You can collapse the track editor to see more of the layout, and you can still use the slider.If you login, then you can save and share your work. If you click export, you get the HTML code needed to display this page.
- You’re not meant to be able to read this, this is just to give you an idea.Monthly releases, until 1.0 in November, movie code names.Template builder coming in July