![Page 1: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/1.jpg)
Flash Video:The Basics, and BEYOND!Lisa Larson + Renée Costantini
www.gotogroupinc.comwww.flashconnections.com
1
![Page 2: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/2.jpg)
of 24
In this session, we’ll cover...
‣ Examples in the wild
‣ The basics of video in Flash
‣Metadata and cue points
‣Basic playlisting; pre-roll and post-roll video
‣Masks and filters
‣Basic code examples for each
2
2
![Page 3: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/3.jpg)
of 24
Startups...
3
3
![Page 4: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/4.jpg)
of 24
Adobe Media Player
4
4
![Page 5: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/5.jpg)
of 24
Taking online video to the next level
‣ Interactive and dynamic
‣ Veotag.com
‣ the-N.com
‣ jumpcut.com
‣ click.tv
5
5
![Page 6: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/6.jpg)
of 24
veotag.com
6
6
![Page 7: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/7.jpg)
of 24
the-N.com
7
7
![Page 8: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/8.jpg)
of 24
jumpcut.com
8
8
![Page 9: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/9.jpg)
of 24
click.tv
9
9
![Page 10: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/10.jpg)
THE BASICS
10
![Page 11: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/11.jpg)
of 24
How to bring video into Flash
‣ FLVPlayback component
‣ Video object
‣ GO TO FLASH »
11
11
![Page 12: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/12.jpg)
of 24
The v3 FLVPlayback component +
‣What it CAN do
‣Quick
‣ Progressive or streaming delivery
‣More easily skinned (than v2 component)
‣ ActionScript cuepoints
‣ FLVPlayback Captioning available
12
12
![Page 13: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/13.jpg)
of 24
The FLVPlayback component –
‣What it CAN’T do
‣Not useful for live chat or alpha channel video
‣Can’t apply bitmap effects or filters just to video
‣Black box; difficult to customize
‣Overkill for simple video players
13
13
![Page 14: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/14.jpg)
of 24
The video object
‣ The most basic simple code to playback video in Flash:var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("yourVideo.flv");
14
‣Or, for streaming video:var nc:NetConnection = new NetConnection();
nc.connect("rtmp://yourFMSserver.com/yourAppName/yourInstanceName");var ns = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("yourVideo.flv");
14
![Page 15: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/15.jpg)
and BEYOND…
15
![Page 16: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/16.jpg)
of 24
Demystifying metadata and cue points
‣What are they?
‣ Embedded in the FLV
‣Or, in some cases external (ActionScript cue points)
‣How do they differ?
‣Metadata: single values
‣Cue points: Associative array of cue point objects
‣What you’d use them for
16
16
![Page 17: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/17.jpg)
of 24
Metadata
‣ Expected metadata in all FLVs
‣ duration
‣width
‣ height
‣ framerate
‣Other useful common metadata properties
‣ audiodatarate, videodatarate, videocodecid
‣Basic Code
‣How to read metadata GO TO FLASH »
17
17
![Page 18: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/18.jpg)
of 24
Cue points
‣Cue point data
‣ time, name, type, parameters
‣Cue point types
‣Navigation
‣ Event
‣ (and ActionScript)
‣Basic code
‣How to read cue points GO TO FLASH »
18
18
![Page 19: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/19.jpg)
of 24
How to add metadata and cue points to FLVs
‣How to add this data to your FLVs
‣ External
‣ AS cue points GO TO FLASH »
19
‣ Internal
‣ Embed during encoding
‣ Inject after encoding
‣ FLV Metadata Injector (FLVMDI)
‣ FLVTool2
‣ Captionate
19
![Page 20: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/20.jpg)
of 24
Playlists
‣What is a playlist
1. Load data into Flash
2. Display or store data
3. Play FLVs
20
20
![Page 21: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/21.jpg)
of 24
Playlists
‣Methods for creating playlists, pros/cons
‣ Parse a text document
‣Read from an array
‣ Parse XML or RSS
‣Retrieve from database
‣Read directory contents
21
21
![Page 22: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/22.jpg)
of 24
Playlists: pre-roll and post-roll
‣ Play a list of videos, in sequence
‣Basic code: pre-roll – content – post-roll
‣ GO TO FLASH »
22
22
![Page 23: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/23.jpg)
of 24
Getting fancy: filters and masking
‣How masking differs from alpha channel video
‣What’s possible
‣What NOT to do
‣Basic code:
‣How to mask a video
‣How to apply a filter to a video
‣ GO TO FLASH »
23
23
![Page 24: Flash Video: The Basics, and BEYOND! · ‣ GO TO FLASH » 11 11. of 24 The v3 FLVPlayback component + ‣What it CAN do ‣Quick ‣Progressive or streaming delivery ‣More easily](https://reader035.vdocuments.mx/reader035/viewer/2022070919/5fb87c5d8105865fa75b123b/html5/thumbnails/24.jpg)
‣ Take the time to understand encoding
‣Use video in Flash to the fullest, with interactivity
‣ Experiment and be creative!
Flash Video for Professionals:Expert Techniques for Integrating Video on the WebWiley Publishing — July, 2007
http://www.flashconnections.com/
of 24
Go make some video magic!
SERIOUS SKILLS.
Flash Videofor Professionals
Expert Techniques for Integrating Video on the Web
Lisa Larson and Renee Constantini
24
24