Integrating Flex and Video

VIΛογισμικό & κατασκευή λογ/κού

11 Οκτ 2011 (πριν από 6 χρόνια και 3 μήνες)

1.092 εμφανίσεις

MAX 2007 © 2007 HalcyonSolutions.net. All Rights Reserved. 1 Greg Hamer President Halcyon Solutions, Inc. g@halcyonsolutions.net

©2007 HalcyonSolutions.net. All Rights Reserved.
1
Greg Hamer
President
Halcyon Solutions, Inc.
g@halcyonsolutions.net
Integrating Flex
and Video
MAX 2007
©2007 HalcyonSolutions.net. All Rights Reserved.
2
ƒ
OVERVIEW
ƒ
DEMOS
ƒ
mx.controls.VideoDisplay
ƒ
Implementing Full Screen
ƒ
H.264 (aka MPEG4)
ƒ
ReviewTube
ƒ
Flash FLVPlayback
ƒ
Flex Video Conference
ƒ
Adobe Premiere Express
ƒ
Adobe Media Player
ƒ
VroomVideo.com
ƒ
Q&A
Note: Links in presentation online at:
http://halcyonsolutions.net/presos/07/max/
Session Outline
©2007 HalcyonSolutions.net. All Rights Reserved.
3
OVERVIEW
©2007 HalcyonSolutions.net. All Rights Reserved.
4
Welcome to the Revolution!
ƒ
Rich Internet Applications
ƒ
Flex leading the charge
ƒ
Flash lead the way
ƒ
AIR joining the fray
ƒ
AJAX (note: AJAX has no video support)
ƒ
Video on the Web
ƒ
Flash come from no where in 2002 to dominating
video on the web today
ƒ
Mobile devices now in the offing
©2007 HalcyonSolutions.net. All Rights Reserved.
5
Video in Flex – Bidirectional
ƒ
Playback
ƒ
Primary Use Case
ƒ
Live Broadcast & Record
ƒ
Limited Quality (Sorenson Spark)
ƒ
Appropriate for "Social Networking" use cases, e.g.
video chat
ƒ
Non-Flex webcast solutions from Adobe for use
cases requiring higher quality (Flash Media Encoder,
Visual Communicator)
©2007 HalcyonSolutions.net. All Rights Reserved.
6
Video Playback in Flex – Options
ƒ
Flex Framework Component
ƒ
mx.controls.VideoDisplay
ƒ
Flash CS3 FLVPlayback Component using
the Flex Component Kit for Flash CS3
ƒ
Custom Development
ƒ
Third Party / Community / Open Source
(not yet)
©2007 HalcyonSolutions.net. All Rights Reserved.
7
DEMOS
©2007 HalcyonSolutions.net. All Rights Reserved.
8
Demos Overview
ƒ
Goal: Use publicly available sources
ƒ
Walk through examples
ƒ
Put the examples in context
ƒ
Homework: You review on your own as
needed
©2007 HalcyonSolutions.net. All Rights Reserved.
9
Demos Overview
Yes Source Available
ƒ
mx.controls.VideoDisplay
ƒ
ReviewTube
ƒ
Flash FLVPlayback
using Flex Compon-
ent Kit for Flash CS3
ƒ
Video Conference
with Flex & FMS
No Source Available
ƒ
Adobe Premiere
Express – Flex w/
Flash Media Server
ƒ
Adobe Media Player
– Flex/AIR
ƒ
VroomVideo.com–
Flex w/ Flash Media
Server
©2007 HalcyonSolutions.net. All Rights Reserved.
10
DEMO #1
mx.controls.VideoDisplay
©2007 HalcyonSolutions.net. All Rights Reserved.
11
mx.controls.VideoDisplay
ƒ
Flex 2 Component Explorer
ƒ
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
ƒ
Visual Components > Loader Controls >
VideoDisplay > VideoDisplay Control Example
ƒ
Video File Hosting Options
ƒ
Progressive using HTTP
ƒ
Streaming using RTMP
ƒ
Flash Media Server (aka FMS)
ƒ
Flash Video Streaming Service (FVSS)
ƒ
provided by Content Delivery Network Providers (CDNs)
©2007 HalcyonSolutions.net. All Rights Reserved.
12
Video File Hosting Options
ƒ
Progressive using HTTP
ƒ
No content protection (video files are downloaded to
browser cache)
ƒ
Seek dependent on percent of file downloaded
ƒ
Example: YouTube
ƒ
Streaming using RTMP
ƒ
Content protection results from absence of video file caching
ƒ
Seek 100% on load
ƒ
Dynamic bandwidth switching during playback
ƒ
Examples: NBC.com, FOX.com
ƒ
Embed not supported
©2007 HalcyonSolutions.net. All Rights Reserved.
13
DEMO #2
Implementing Full Screen
©2007 HalcyonSolutions.net. All Rights Reserved.
14
Implementing Full Screen
ƒ
Creating full-screen Flex applications
by Pete deHaan
http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/
ƒ
Flex/ActionScript Code
ƒ
HTML Wrapper Code (required!)
ƒ
Sample file:
ƒ
http://labs.adobe.com/technologies/flashplayer9/fullscreendemo/backcountry_bombshells_4min_HD_1500_96.flv
©2007 HalcyonSolutions.net. All Rights Reserved.
15
Full Screen
ƒ
Full Screen is a major emphasis in current
Flash Player development!
ƒ
Full-screen mode with hardware scaling. Probably
the biggest new feature in the Flash Player Update
3. This leverages DirectX on Windows and OpenGL
on OSX. Source, Tinic Uro, Software Engineer:
http://www.kaourantin.net/2007/08/what-just-happened-to-video-on-web_20.html
ƒ
Full-Screen mode with hardware scaling
http://labs.adobe.com/wiki/index.php/Flash_Player:9:Update:Full-Screen_Mode_HW
©2007 HalcyonSolutions.net. All Rights Reserved.
16
DEMO #3
H.264 (aka MPEG4)
©2007 HalcyonSolutions.net. All Rights Reserved.
17
Video Codecs Supported
"HD Web Video" using standard
codec w/ medium/high bandwidth
9.0.60H.264 / AAC
"HD Video" with optimized
performance w/ high bitrate
(e.g. from local disk)
8ON2 VP6 –
Simple Profile
Our current best quality
"Web Video"
(low/medium/high bandwidth)
8On2 VP6
Video Conferencing,
Social Media
6Sorenson Spark
Primary Uses
Flash Player
Version
Introduced
Codec
See http://www.flashvideofaq.com/
to compare Sorenson Spark vs On2 VP6
©2007 HalcyonSolutions.net. All Rights Reserved.
18
H.264 (aka MPEG4)
ƒ
Requires Flash Player 9.0.60
ƒ
No Flex or ActionScript specific syntax!
ƒ
Just specify URL to a valid MP4 file
ƒ
Flash Player reads the file specified
ƒ
Flash Player 9.0.60 and higher plays H.264 format
ƒ
Sample file:
ƒ
http://labs.adobe.com/technologies/flashplayer9/fullscreendemo/backcountry_bombshells_4min_HD_H264.mp4
©2007 HalcyonSolutions.net. All Rights Reserved.
19
H.264 (aka MPEG4)
ƒ
Advantages
ƒ
Encode once to support multiple distribution targets
ƒ
Note: When targeting multiple bandwidths, multiple
encodings are still required
ƒ
Exploring Flash Player support for high-definition H.264 video
and AAC audio
http://www.adobe.com/devnet/flashplayer/articles/hd_video_flash_player.html
ƒ
Hardware decoding
ƒ
Especially important on mobile devices!
ƒ
Possible future in PCs/Macs too:
http://www.pbs.org/cringely/pulpit/2007/pulpit_20070308_001806.html
©2007 HalcyonSolutions.net. All Rights Reserved.
20
DEMO #4
ReviewTube
©2007 HalcyonSolutions.net. All Rights Reserved.
21
ReviewTube
ƒ
Video in context of a complex Flex application.
ƒ
http://www.joeberkovitz.com/reviewtube/
ƒ
A site that allows users to create, edit, and view time-based
comments for videos hosted by YouTube.com
ƒ
Companion article:
ƒ
"An architectural blueprint for Flex applications"
http://www.adobe.com/devnet/flex/articles/blueprint.html
ƒ
Article details a high-level architecture for building Flex
applications
ƒ
Architecture called the "Model-View-Controller-Service"
approach, or MVCS for short
©2007 HalcyonSolutions.net. All Rights Reserved.
22
Review Tube UI
©2007 HalcyonSolutions.net. All Rights Reserved.
23
Review Tube UI – Container View
©2007 HalcyonSolutions.net. All Rights Reserved.
24
Video Specific Elements
ƒ
Namespace
ƒ
xmlns:view="com.joeberkovitz.reviewtube.view.*"
ƒ
ReviewTube.mxml > MainView.mxml >
VideoCommentary.mxml >
ƒ
YouTubeVideoDisplay.mxml
ƒ
VideoTimeStrip.mxml
ƒ
<mx:Label text="{...(videoDisplay.playheadTime)}"/>
ƒ
<mx:Button... label="Play" ... />
ƒ
<mx:Button... label="Pause" ... />
ƒ
Value Object
ƒ
import com.joeberkovitz.reviewtube.model.VideoInfo;
http://www.joeberkovitz.com/reviewtube/
©2007 HalcyonSolutions.net. All Rights Reserved.
25
DEMO #5
Flash FLVPlayback
©2007 HalcyonSolutions.net. All Rights Reserved.
26
Flash FLVPlayback Component
ƒ
Using Flash FLVPlayback in Flex 2.01
http://www.flashcomguru.com/index.cfm/2007/7/18/flvplayback-in-flex
ƒ
Requires
ƒ
Flash CS3
ƒ
Flex
ƒ
Flex 2.01
ƒ
Flex Component Kit for Flash CS3
http://labs.adobe.com/wiki/index.php/Flex_Component_Kit_for_Flash_CS3
ƒ
Flex 3
ƒ
See Chapter 32 in Flex 3 Developer's Guide
http://livedocs.adobe.com/labs/flex/3/html/swf9_040_01.html
©2007 HalcyonSolutions.net. All Rights Reserved.
27
Benefits of Flash FLVPlayback
ƒ
Prebuilt, fully functional components for
FLVPlayback
ƒ
Very thorough documentation of all functionality
ƒ
http://livedocs.adobe.com/flash/9.0/main/00000552.html
ƒ
Includes a collection of predesigned skins for
quickly and easily customizing the appearance of
playback controls
ƒ
Super easy customization of predesigned skins
through configuration of color and alpha values
ƒ
Allows advanced users to create their own skins
ƒ
Supports:
ƒ
HTTP Progressive and RTMP Streaming
ƒ
Full screen
ƒ
Closed captions
ƒ
Cue points (events that enable synchronization with
outside text, graphics, etc.
ƒ
SMIL support (cases w/ multiple streams, each optimized
for different bandwidths)
©2007 HalcyonSolutions.net. All Rights Reserved.
28
DEMO #6
Flex Video Conference
©2007 HalcyonSolutions.net. All Rights Reserved.
29
Video Conference with Flex & FMS
ƒ
A sample application that accompanies
the Web Developer's & Designer's Journal
article:
ƒ
Video Conference with Flex & FMS
By: Renaun Erickson
http://mxdj.sys-con.com/read/295379.htm
Source downloadable from:
http://renaun.com/blog/2006/10/28/139/
ƒ
Uses Flex client side w/ Flash Media Server
on server side
©2007 HalcyonSolutions.net. All Rights Reserved.
30
Flex Video Conference
ƒ
Does not use mx.controls.VideoDisplay
ƒ
Demonstrates video acquisition using
Flash Player
ƒ
Uses classes in the flash packages:
ƒ
flash.media.Video
ƒ
flash.media.Camera
ƒ
flash.media.microphone
ƒ
flash.net.NetConnection
ƒ
flash.net.NetStream
©2007 HalcyonSolutions.net. All Rights Reserved.
31
DEMO #7
Adobe Premiere Express
©2007 HalcyonSolutions.net. All Rights Reserved.
32
Adobe Premiere Express
ƒ
http://www.adobe.com/products/premiereexpress/
ƒ
Licensed application
ƒ
MTV.com
ƒ
YouTube.com
ƒ
Photobucket.com
ƒ
Hosted Service
ƒ
Application uses Flex client side w/ Flash Media
Server on server side
ƒ
http://remix.mtv.com/
©2007 HalcyonSolutions.net. All Rights Reserved.
33
DEMO #8
Adobe Media Player
©2007 HalcyonSolutions.net. All Rights Reserved.
34
Adobe Media Player
ƒ
AIR application that uses Flex client side
ƒ
Video via HTTP progressive download or
RTMP streaming
ƒ
Progressively downloaded videos
thereafter stored locally for replay
ƒ
AIR application manages local files and
user selected RSS feeds
ƒ
Developer customization of feed
downloads (not the player itself)
©2007 HalcyonSolutions.net. All Rights Reserved.
35
DEMO #9
VroomVideo.com
©2007 HalcyonSolutions.net. All Rights Reserved.
36
VroomVideo.com
ƒ
Video record application
ƒ
Uses Flex client side w/ Flash Media Server
on server side
ƒ
Similar to YouTube's Quick Capture which
uses Flash authored SWF for video record
©2007 HalcyonSolutions.net. All Rights Reserved.
37
Q&A
©2007 HalcyonSolutions.net. All Rights Reserved.
38
Session Link & Email Contact
ƒ
Note: Links in presentation online at:
http://halcyonsolutions.net/presos/07/flexvideo_vegasflex.org
ƒ
Email: g@halcyonsolutions.net
©2007 HalcyonSolutions.net. All Rights Reserved.
39
THE END
THANKS! ☺