24
Flash Video: The Basics, and BEYOND! Lisa Larson + Renée Costantini www.gotogroupinc.com www.flashconnections.com 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

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‣ 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