SlideShare uma empresa Scribd logo
1 de 119
Baixar para ler offline
Delivering the Best
Stage Video & OSMF    with R Blank
Delivering The Best Flash HD Video with Stage Video and OSMF
Delivering The Best Flash HD Video with Stage Video and OSMF
Delivering The Best Flash HD Video with Stage Video and OSMF
Delivering The Best Flash HD Video with Stage Video and OSMF
Bitchin’ HD
     in Flash
(yes, really)
Stage Video
Stage Video is
BETTER Video




                 6
7
higher-res,




              7
higher-res,
higher-framerate




                   7
higher-res,
higher-framerate
HD video




                   7
higher-res,
higher-framerate
HD video
in Flash




                   7
up to 85% savings!




                     8
overhead savings




                   9
overhead savings
& hardware acceleration




                          9
a slimmer video player




                         10
hardware acceleration
means...




                        11
hardware acceleration
means...
taping into the power of the
viewer’s device




                               11
Hardware Acceleration Support in Flash Player


Player             Support Added
              H.264 and Full-Screen Hardware
9.0.115                Acceleration
          Added Hardware Acceleration in Normal
  10                     View
           Improved GPU acceleration and Made
 10.1             “gpu” Default WMODE

 10.2                   Stage Video

                                                  12
13
Without Stage Video




                      13
Without Stage Video




                      13
Without Stage Video




                      13
Without Stage Video




                      13
Without Stage Video




                      13
Without Stage Video




                      13
Without Stage Video




                      13
With Stage Video




                   14
With Stage Video




                   14
With Stage Video




                   14
With Stage Video




                   14
With Stage Video




                   14
With Stage Video




                   14
With Stage Video




                   14
Without Stage                                With
             Video                                Stage Video




                                           The decoder renders the video
Flash renders the video and all graphics
                                            and Flash draws on top of it


                                                                           15
Without Stage
Getting started with stage video | Adobe Developer Connection                                           3/14/11 12:56 PM                                   With
                               Video
 by making immersive HD video experiences on the web possible. Recent implementations of Flash Player
 on mobile devices have brought new ideas to the Flash Player team at Adobe for how to display video in
 Flash and always improve the user experience. Stage video is the result of those efforts.
                                                                                                                                                       Stage Video
 The traditional method for rendering video in Flash Player uses the Video object. The Video object is
 treated the same as any other object on the stage, which gives developers an unprecedented amount of started with stage video | Adobe Developer Connection
                                                                                                        Getting                                                                                                   3/14/11 12:56 PM

 creative control. For example, video can be displayed on each face of a spinning cube, or multiple videos
 can be blended together with one another. The Video object is treated as any other DisplayObject. FigurePlayer display list but sits behind the stage instead. Figure 2 illustrates this design.
 1 illustrates this idea.




                                                                                                                   Figure 2. The StageVideo object sits behind the Flash stage.
 Figure 1. Multiple videos can be blended together using the Video object.
                                                                                                                   The performance benefits of stage video are especially pronounced for televisions, set-top boxes, and
 To support that level of creative control, Flash Player must do a significant amount of processing for each
                                                                                                           mobile devices. These devices do not have CPUs as powerful as desktop computers, but they do have very
 video frame. Depending on the power of the underlying device, this increased processing may decreasepowerful video decoders capable of rendering high-quality video content with very little CPU usage.
 the frame rate of the video, or it may increase the load that Flash Player places on the CPU.             However, even on the desktop, stage video will dramatically change video performance in Flash Player.

                                                                                                             As a developer, you must understand that stage video is the second step of enhancements related to video
 A new way to render video                                                                                   GPU acceleration in Flash Player. The first step is encoding the video so as to take best advantage of the

        Flash renders the video and all                                                                                    The decoder renders the video
                                                                                                             hardware acceleration available on the target platform. Hence, to get the best experience possible, you
  To mitigate the performance impact of rendering video in the Video object, Adobe has introduced stagewill need to have the two steps enabled. The H.264 codec is stage video's best friend; using this will ensure
  video as a new way to render video. This approach takes full advantage of the underlying video hardware. get full GPU acceleration from video decoding to rendering. With this approach, no read-back
                                                                                                             you

                  graphics
  The result is a much lower load on the CPU, which translates into higher frame rates on less powerful
  devices and also less memory usage. With stage video, the StageVideo object does not sit inside the Flash                 and Flash draws on top of it
                                                                                                             (sending the data from the GPU to the CPU) is required to composite the video frames in the display list
                                                                                                             anymore. The YUV 4:2:0 formatted video frames are converted to RGB through a GPU shader (DirectX9 or
                                                                                                             OpenGL) and blitted onscreen. As a result, you will see higher pixel fidelity and some reduction in CPU and
http://www.adobe.com/devnet/flashplayer/articles/stage_video.html                                     Page 3 memory usage.
                                                                                                             of 18



                                                                                                                 http://www.adobe.com/devnet/flashplayer/articles/stage_video.html                                     Page 4 of 18




                                                                                                                                                                                                                    16
Enabling
Stage Video
Embed code
& ActionScript




                 18
<object width="470" height="320"> <param
name="movie" value="StrobeMediaPlayback.swf"></
param><param name="flashvars" value="src=..
%2Fmedia%2Fseal.f4v&skin=skin
%2Fskin.xml&poster=..%2Fmedia%2Fposter.jpg"></
param><param name="allowFullScreen"
value="true"></param><param
name="allowscriptaccess" value="always"></
param><embed src="StrobeMediaPlayback.swf"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="470" height="320" flashvars="src=..%2Fmedia


                                                 19
WMODE
<param name="wmode" value="window" />




                                        20
WMODE Settings

 Setting                     Meaning
              Render SWF in its own window
 window        Default prior to 10.1
              Render SWF opaquely, above other
 opaque       browser content
              Render SWF transparently, below other
transparent   browser content

  direct      Use the fastest path to screen to render
              Invoke hardware acceleration from the
   gpu        graphics card to render
               Default since 10.1


                                                         21
WMODE Implementation History

Player Ver.       WMODE Support

              Included Support for:
                 Window (default)
  Pre-10         Opaque
                 Transparent

              Added Support for:
    10          Direct
                GPU


10.1 & 10.2   Default is GPU



                                      22
for consistent Stage Video, set
WMODE= "direct"




                                  23
24
AS3 API introduces new code




                              24
AS3 API introduces new code

 A good intro from Adobe
 http://tinyurl.com/29xsd5z




                              24
wouldn’t it be nice if Stage
Video just worked?




                               25
OSMF
The Open Source Media
Framework from Adobe
 http://osmf.org




                        27
Delivery Platform
Creation Tools




Delivery Platform
Content




Creation
Tools



Delivery
Platform
Content


 Code




Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework


Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework   Media Framework


Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework   Media Framework


Creation
Tools



Delivery
Platform
OSMF makes it easy to




                        35
OSMF makes it easy to
 load,




                        35
OSMF makes it easy to
 load,
 play




                        35
OSMF makes it easy to
 load,
 play
 and display




                        35
OSMF makes it easy to
 load,
 play
 and display
all Flash media types


                        35
Streaming Audio
 mp3, AAC, Speex, and Nellymoser

Streaming Video
 FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP

Progressive Audio
 mp3

Progressive Video
 FLV, F4V, MP4, MP4V-ES, M4V, 3GPP, 3GPP2, QuickTime

Images

                                                       36
goto osmf.org
download OSMF 'source'
copy OSMF.swc
 For Flash Pro
  In Windows:
    Program FilesAdobeAdobe Flash CS5Common
    ConfigurationActionScript 3.0libs
  On the Macintosh:
    /Applications/Adobe Flash CS5/Common/Configuration/
    ActionScript 3.0/libs


                                                          37
OSMF is Only Code
 No Design or GUI




                    38
OSMF is Only Code
 No Design or GUI

What if I hate code?




                       38
Strobe is an open-source
media player built on OSMF
 http://osmf.org/strobe_mediaplayback.html




                                             39
Strobe can be skinned with
Flash Pro
or even just images and XML




                              40
Download Strobe
Run setup.html




                  41
That’s too much.




                   42
That’s too much.
What if I don’t even want to
download and learn Strobe?




                               42
Adobe hosts a version of
Strobe, called
Flash Media Playback
 http://adobe.com/products/flashmediaplayback/




                                                 43
Which you can quickly
customize and use at
 http://osmf.org/configurator/fmp/




                                     44
Stage Video just works
in OSMF and Strobe




                         45
Two versions of OSMF (&
Strobe); for Player 10 and 10.1




                                  46
Two versions of OSMF (&
Strobe); for Player 10 and 10.1
 If you want DRM or HTTP Streaming, use version for
 Player 10.1




                                                  46
Two versions of OSMF (&
Strobe); for Player 10 and 10.1
 If you want DRM or HTTP Streaming, use version for
 Player 10.1
 Otherwise, use version for Player 10




                                                  46
Two versions of OSMF (&
Strobe); for Player 10 and 10.1
 If you want DRM or HTTP Streaming, use version for
 Player 10.1
 Otherwise, use version for Player 10
Stage Video support is in both



                                                  46
What if I want to disable Stage
Video?




                                  47
48
OSMFSettings.enableStageVideo = false;




                                     48
OSMFSettings.enableStageVideo = false;


OSMFSettings.enableStageVideo = true;




                                        48
Remember: Stage Video
just works in OSMF and Strobe

And that’s just 1 of many
things that OSMF makes easy
 Learn more @ http://osmf.org




                                49
Optimizing
Encoding for
 Stage Video
H.264 Codec
A CODEC (COder-DECoder) is
the set of code that
compresses and decompresses
video




                          52
53
Video data is compressed
using a codec




                           53
Video data is compressed
using a codec
And then stored in a file using
a format (or container)




                                  53
Video data is compressed
using a codec
And then stored in a file using
a format (or container)
So the same video file type
(e.g., MOV) can have different

                                  53
H.264 is used in many formats
 .mp4
 .f4v
 .m4v
 .m4a
 .mov
 .3gp




                                54
H.264 is used in many formats
 .mp4
 .f4v
 .m4v
 .m4a
 .mov
 .3gp
but, not all files of those types

                                    54
History of Video Support in Flash
 Ver      Codec                     Notes
 4/5    SWF          Motion JPG Variant from Wildform Flix
        Sorensen
  6                  Streaming only; MetaData & CuePoints
        Spark FLV

  7                  Added Progressive FLV Video

  8     On2 VP6 FLV Improved Quality; Transparency; HD
        H.264 (all   Industry-standard codec; Full-Screen
9.0.115
        filetypes)   Hardware Acceleration
                     New format (F4V); HA out of Full-
  10
                     Screen; OSMF & Strobe Introduced
 10.2                Stage Video on Desktop & Mobile


                                                             55
H.264 looks good at many
bitrates




                           56
H.264 encodes relatively
quickly




                           57
H.264 is not controlled by any
one company
 http://www.mpegla.com




                                 58
H.264 is already used by many
firms in their products
 including Apple, Sony, Nokia, SanDisk, Palm,
 Blackberry and Microsoft
and it’s already installed on
tons of devices
 including Blu-ray, PS3, XBox, iPhone, and all video-
 enabled mobile devices


                                                    59
Which is why you encode video
using H.264 to deliver the best
HD video




                              60
Adobe Media Encoder
 On the main screen, choose any preset that starts
 with F4V (not FLV)




                                                     61
Adobe Media Encoder
 Or, in the Export Settings, click the “Format” tab,
 and select “F4V” (not FLV)




                                                       62
FFMPEG is a multi-platform,
open-source video encoder
 Get FFMPEGx for mac
 http://homepage.mac.com/major4/

Select a Video Setting that has
‘H264’ in the name


                                   63
Limitations
   of Stage
      Video
You Can’t...
Have more than 8 concurrent
videos on desktop




                              65
You Can’t...
Have more than 8 concurrent
videos on desktop
or more than 1 on mobile
devices



                              65
You Can’t...
Freely rotate the video
 can only rotate @ 0, 90, 180, 270 degrees




                                             66
You Can’t...
Apply 3B, color or skewing
transformations




                             67
You Can’t...
Apply alpha channel,
blendMode, filter, mask, or
scale9Grid transformations




                              68
You Can’t...
Copy the video into BitmapData




                             69
You Can’t...
Bitmap-cache the video




                         70
You Can’t...
Embed the video
 (only NetStream playback)




                             71
You Shouldn’t...
Use Stage Video with
transparent SWFs




                       72
73
Play Better HD Video




                       73
Play Better HD Video
With Stage Video in Player 10.2




                              73
Play Better HD Video
With Stage Video in Player 10.2
To Optimize the Experience:




                              73
Play Better HD Video
With Stage Video in Player 10.2
To Optimize the Experience:
 Use H.264 Video




                              73
Play Better HD Video
With Stage Video in Player 10.2
To Optimize the Experience:
 Use H.264 Video
 Set WMODE to “direct”




                              73
Play Better HD Video
With Stage Video in Player 10.2
To Optimize the Experience:
 Use H.264 Video
 Set WMODE to “direct”
And Use OSMF (or Strobe) to
forget about the code!

                              73
Thank You

This talk is Posted on A/B Labs
  http://labs.almerblank.com

My Personal Blog
 http://rblank.com

My Online Training


                                  74

Mais conteúdo relacionado

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Delivering The Best Flash HD Video with Stage Video and OSMF

  • 1. Delivering the Best Stage Video & OSMF with R Blank
  • 6. Bitchin’ HD in Flash (yes, really)
  • 9. 7
  • 14. up to 85% savings! 8
  • 16. overhead savings & hardware acceleration 9
  • 17. a slimmer video player 10
  • 19. hardware acceleration means... taping into the power of the viewer’s device 11
  • 20. Hardware Acceleration Support in Flash Player Player Support Added H.264 and Full-Screen Hardware 9.0.115 Acceleration Added Hardware Acceleration in Normal 10 View Improved GPU acceleration and Made 10.1 “gpu” Default WMODE 10.2 Stage Video 12
  • 21. 13
  • 36. Without Stage With Video Stage Video The decoder renders the video Flash renders the video and all graphics and Flash draws on top of it 15
  • 37. Without Stage Getting started with stage video | Adobe Developer Connection 3/14/11 12:56 PM With Video by making immersive HD video experiences on the web possible. Recent implementations of Flash Player on mobile devices have brought new ideas to the Flash Player team at Adobe for how to display video in Flash and always improve the user experience. Stage video is the result of those efforts. Stage Video The traditional method for rendering video in Flash Player uses the Video object. The Video object is treated the same as any other object on the stage, which gives developers an unprecedented amount of started with stage video | Adobe Developer Connection Getting 3/14/11 12:56 PM creative control. For example, video can be displayed on each face of a spinning cube, or multiple videos can be blended together with one another. The Video object is treated as any other DisplayObject. FigurePlayer display list but sits behind the stage instead. Figure 2 illustrates this design. 1 illustrates this idea. Figure 2. The StageVideo object sits behind the Flash stage. Figure 1. Multiple videos can be blended together using the Video object. The performance benefits of stage video are especially pronounced for televisions, set-top boxes, and To support that level of creative control, Flash Player must do a significant amount of processing for each mobile devices. These devices do not have CPUs as powerful as desktop computers, but they do have very video frame. Depending on the power of the underlying device, this increased processing may decreasepowerful video decoders capable of rendering high-quality video content with very little CPU usage. the frame rate of the video, or it may increase the load that Flash Player places on the CPU. However, even on the desktop, stage video will dramatically change video performance in Flash Player. As a developer, you must understand that stage video is the second step of enhancements related to video A new way to render video GPU acceleration in Flash Player. The first step is encoding the video so as to take best advantage of the Flash renders the video and all The decoder renders the video hardware acceleration available on the target platform. Hence, to get the best experience possible, you To mitigate the performance impact of rendering video in the Video object, Adobe has introduced stagewill need to have the two steps enabled. The H.264 codec is stage video's best friend; using this will ensure video as a new way to render video. This approach takes full advantage of the underlying video hardware. get full GPU acceleration from video decoding to rendering. With this approach, no read-back you graphics The result is a much lower load on the CPU, which translates into higher frame rates on less powerful devices and also less memory usage. With stage video, the StageVideo object does not sit inside the Flash and Flash draws on top of it (sending the data from the GPU to the CPU) is required to composite the video frames in the display list anymore. The YUV 4:2:0 formatted video frames are converted to RGB through a GPU shader (DirectX9 or OpenGL) and blitted onscreen. As a result, you will see higher pixel fidelity and some reduction in CPU and http://www.adobe.com/devnet/flashplayer/articles/stage_video.html Page 3 memory usage. of 18 http://www.adobe.com/devnet/flashplayer/articles/stage_video.html Page 4 of 18 16
  • 40. <object width="470" height="320"> <param name="movie" value="StrobeMediaPlayback.swf"></ param><param name="flashvars" value="src=.. %2Fmedia%2Fseal.f4v&skin=skin %2Fskin.xml&poster=..%2Fmedia%2Fposter.jpg"></ param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></ param><embed src="StrobeMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="470" height="320" flashvars="src=..%2Fmedia 19
  • 42. WMODE Settings Setting Meaning Render SWF in its own window window Default prior to 10.1 Render SWF opaquely, above other opaque browser content Render SWF transparently, below other transparent browser content direct Use the fastest path to screen to render Invoke hardware acceleration from the gpu graphics card to render Default since 10.1 21
  • 43. WMODE Implementation History Player Ver. WMODE Support Included Support for: Window (default) Pre-10 Opaque Transparent Added Support for: 10 Direct GPU 10.1 & 10.2 Default is GPU 22
  • 44. for consistent Stage Video, set WMODE= "direct" 23
  • 45. 24
  • 46. AS3 API introduces new code 24
  • 47. AS3 API introduces new code A good intro from Adobe http://tinyurl.com/29xsd5z 24
  • 48. wouldn’t it be nice if Stage Video just worked? 25
  • 49. OSMF
  • 50. The Open Source Media Framework from Adobe http://osmf.org 27
  • 55. Content Code Application Framework Creation Tools Delivery Platform
  • 56. Content Code Application Framework Media Framework Creation Tools Delivery Platform
  • 57. Content Code Application Framework Media Framework Creation Tools Delivery Platform
  • 58. OSMF makes it easy to 35
  • 59. OSMF makes it easy to load, 35
  • 60. OSMF makes it easy to load, play 35
  • 61. OSMF makes it easy to load, play and display 35
  • 62. OSMF makes it easy to load, play and display all Flash media types 35
  • 63. Streaming Audio mp3, AAC, Speex, and Nellymoser Streaming Video FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP Progressive Audio mp3 Progressive Video FLV, F4V, MP4, MP4V-ES, M4V, 3GPP, 3GPP2, QuickTime Images 36
  • 64. goto osmf.org download OSMF 'source' copy OSMF.swc For Flash Pro In Windows: Program FilesAdobeAdobe Flash CS5Common ConfigurationActionScript 3.0libs On the Macintosh: /Applications/Adobe Flash CS5/Common/Configuration/ ActionScript 3.0/libs 37
  • 65. OSMF is Only Code No Design or GUI 38
  • 66. OSMF is Only Code No Design or GUI What if I hate code? 38
  • 67. Strobe is an open-source media player built on OSMF http://osmf.org/strobe_mediaplayback.html 39
  • 68. Strobe can be skinned with Flash Pro or even just images and XML 40
  • 71. That’s too much. What if I don’t even want to download and learn Strobe? 42
  • 72. Adobe hosts a version of Strobe, called Flash Media Playback http://adobe.com/products/flashmediaplayback/ 43
  • 73. Which you can quickly customize and use at http://osmf.org/configurator/fmp/ 44
  • 74. Stage Video just works in OSMF and Strobe 45
  • 75. Two versions of OSMF (& Strobe); for Player 10 and 10.1 46
  • 76. Two versions of OSMF (& Strobe); for Player 10 and 10.1 If you want DRM or HTTP Streaming, use version for Player 10.1 46
  • 77. Two versions of OSMF (& Strobe); for Player 10 and 10.1 If you want DRM or HTTP Streaming, use version for Player 10.1 Otherwise, use version for Player 10 46
  • 78. Two versions of OSMF (& Strobe); for Player 10 and 10.1 If you want DRM or HTTP Streaming, use version for Player 10.1 Otherwise, use version for Player 10 Stage Video support is in both 46
  • 79. What if I want to disable Stage Video? 47
  • 80. 48
  • 83. Remember: Stage Video just works in OSMF and Strobe And that’s just 1 of many things that OSMF makes easy Learn more @ http://osmf.org 49
  • 86. A CODEC (COder-DECoder) is the set of code that compresses and decompresses video 52
  • 87. 53
  • 88. Video data is compressed using a codec 53
  • 89. Video data is compressed using a codec And then stored in a file using a format (or container) 53
  • 90. Video data is compressed using a codec And then stored in a file using a format (or container) So the same video file type (e.g., MOV) can have different 53
  • 91. H.264 is used in many formats .mp4 .f4v .m4v .m4a .mov .3gp 54
  • 92. H.264 is used in many formats .mp4 .f4v .m4v .m4a .mov .3gp but, not all files of those types 54
  • 93. History of Video Support in Flash Ver Codec Notes 4/5 SWF Motion JPG Variant from Wildform Flix Sorensen 6 Streaming only; MetaData & CuePoints Spark FLV 7 Added Progressive FLV Video 8 On2 VP6 FLV Improved Quality; Transparency; HD H.264 (all Industry-standard codec; Full-Screen 9.0.115 filetypes) Hardware Acceleration New format (F4V); HA out of Full- 10 Screen; OSMF & Strobe Introduced 10.2 Stage Video on Desktop & Mobile 55
  • 94. H.264 looks good at many bitrates 56
  • 96. H.264 is not controlled by any one company http://www.mpegla.com 58
  • 97. H.264 is already used by many firms in their products including Apple, Sony, Nokia, SanDisk, Palm, Blackberry and Microsoft and it’s already installed on tons of devices including Blu-ray, PS3, XBox, iPhone, and all video- enabled mobile devices 59
  • 98. Which is why you encode video using H.264 to deliver the best HD video 60
  • 99. Adobe Media Encoder On the main screen, choose any preset that starts with F4V (not FLV) 61
  • 100. Adobe Media Encoder Or, in the Export Settings, click the “Format” tab, and select “F4V” (not FLV) 62
  • 101. FFMPEG is a multi-platform, open-source video encoder Get FFMPEGx for mac http://homepage.mac.com/major4/ Select a Video Setting that has ‘H264’ in the name 63
  • 102. Limitations of Stage Video
  • 103. You Can’t... Have more than 8 concurrent videos on desktop 65
  • 104. You Can’t... Have more than 8 concurrent videos on desktop or more than 1 on mobile devices 65
  • 105. You Can’t... Freely rotate the video can only rotate @ 0, 90, 180, 270 degrees 66
  • 106. You Can’t... Apply 3B, color or skewing transformations 67
  • 107. You Can’t... Apply alpha channel, blendMode, filter, mask, or scale9Grid transformations 68
  • 108. You Can’t... Copy the video into BitmapData 69
  • 110. You Can’t... Embed the video (only NetStream playback) 71
  • 111. You Shouldn’t... Use Stage Video with transparent SWFs 72
  • 112. 73
  • 113. Play Better HD Video 73
  • 114. Play Better HD Video With Stage Video in Player 10.2 73
  • 115. Play Better HD Video With Stage Video in Player 10.2 To Optimize the Experience: 73
  • 116. Play Better HD Video With Stage Video in Player 10.2 To Optimize the Experience: Use H.264 Video 73
  • 117. Play Better HD Video With Stage Video in Player 10.2 To Optimize the Experience: Use H.264 Video Set WMODE to “direct” 73
  • 118. Play Better HD Video With Stage Video in Player 10.2 To Optimize the Experience: Use H.264 Video Set WMODE to “direct” And Use OSMF (or Strobe) to forget about the code! 73
  • 119. Thank You This talk is Posted on A/B Labs http://labs.almerblank.com My Personal Blog http://rblank.com My Online Training 74

Notas do Editor

  1. download slides and all code @ http://labs.almerblank.com \n\n
  2. I&amp;#x2019;m R Blank\nI&amp;#x2019;m the CTO at almer/blank\nwe&amp;#x2019;re an Adobe Solution Partner for the Flash Platform\nbased in Venice Beach, California\n\nand we craft outstanding digital experiences for Fortune 500 companies\n\n\n
  3. in addition to my work at almer/blank\n\n...\n\nI&amp;#x2019;m also the co-founder and training director at the Rich Media Institute, an Adobe Authorized Training Center, with live workshops and specialized online training in Adobe Flash and other digital media technologies\n\n...\n\nas well I teach, write and speak for numerous outlets including....\n\n...\n\nso what is this talk about?\n
  4. in addition to my work at almer/blank\n\n...\n\nI&amp;#x2019;m also the co-founder and training director at the Rich Media Institute, an Adobe Authorized Training Center, with live workshops and specialized online training in Adobe Flash and other digital media technologies\n\n...\n\nas well I teach, write and speak for numerous outlets including....\n\n...\n\nso what is this talk about?\n
  5. getting your viewers the best quality video content possible, in Flash, on all the devices that Flash supports\n\nAdobe has just improved the quality of the spectacular, pixel-drenched HD video that you can deliver in your Flash apps and movies\nand I&amp;#x2019;m going to explain what that is, how it works, and how you can get the most out of it\n\nnow, to start, you may not even know what Stage Video and OSMF are\n\n
  6. so, to explain how to optimize your HD video delivery in Flash, let&amp;#x2019;s start with stage video\n\nwhich is the name of the new feature in Flash that improves video performance\n
  7. stage video can deliver...\n
  8. New Way to Play Video\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n
  9. New Way to Play Video\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n
  10. New Way to Play Video\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n
  11. New Way to Play Video\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n
  12. for years, video quality was limited more by:\n- bandwidth\n- video compression format options\n- computing power\n\nnow, those aren&amp;#x2019;t really limitations anymore\nso Flash taps into the improvements of computing power and video compression formats\n\n---\n\n[launch into demo that illustrates performance improvements]\n\n---\n\nhow does Stage Video achieve these improvements in video playback?\n\n\n
  13. by trimming overhead \n\n...\n\nand tapping into hardware acceleration\n\nfirst, what does overhead savings mean?\n\n\n
  14. by trimming overhead \n\n...\n\nand tapping into hardware acceleration\n\nfirst, what does overhead savings mean?\n\n\n
  15. before Stage Video was introduced, a video in Flash is just like any other object in Flash --\n-- it can be animated, tweened, shaded, transformed and otherwise manipulated\n-- and thus it must be rendered to the screen like all other objects in Flash\n\nTo support that level of creative control, Flash Player must do a significant amount of processing for each video frame. Depending on the power of the viewing device, this may force Flash to drop frames, significantly impairing the viewing experience.\n\nbut, the vast majority of video-on-the-web doesn&amp;#x2019;t need any fancy Flash treatment\n-- it&amp;#x2019;s just a rectangle that needs to refresh as frequently as possible\n\nso, if all you are doing is delivering a regular, rectangular video, \nand you don&amp;#x2019;t want all that extra overhead from Flash to weigh down your video playback,\nand you want to render the video as well as the viewing device can support, \nyou use Stage Video which skips all of that overhead\n\nthis does limit what you can do with the video (which I&amp;#x2019;ll discuss later in this talk), but it gets you much higher video performance.\n\nso, just like you can choose to use a sprite does less than a movieclip, and doesn&amp;#x2019;t bring all the overhead of a movieclip\nstagevideo does less than Video object video, but also has less overhead.\nand thus improves the performance\n\n\n
  16. that was trimming overhead\nI mentioned that the second way Stage Video improves playback is by using hardware acceleration\n\nwhat does that actually mean?\n\nhardware acceleration means that Flash is relying on the device hardware (as opposed to the Flash software) for help in accelerating the performance of Flash -- in the case of Stage Video, we&amp;#x2019;re talking specifically about video playback performance.\n\nfor those who don&amp;#x2019;t know, hardware is much more powerful than software for this type of task. For years, Flash didn&amp;#x2019;t tap into any native device hardware (remember the default of 12 fps?); but in more recent versions they have, giving us much better performance.\n\nIn this case, there&amp;#x2019;s a little video decoder on most every graphics card in every computer; Flash is now asking that little video decoder for help decoding and rendering the video to the screen -- \nthis accelerates video playback -- and therefore improves the quality of the video that you can deliver in Flash.\n\nStage Video is the latest hardware acceleration enhancement in Flash -- the history of hardware acceleration in the Flash Player goes back a few versions.\n\n\n
  17. that was trimming overhead\nI mentioned that the second way Stage Video improves playback is by using hardware acceleration\n\nwhat does that actually mean?\n\nhardware acceleration means that Flash is relying on the device hardware (as opposed to the Flash software) for help in accelerating the performance of Flash -- in the case of Stage Video, we&amp;#x2019;re talking specifically about video playback performance.\n\nfor those who don&amp;#x2019;t know, hardware is much more powerful than software for this type of task. For years, Flash didn&amp;#x2019;t tap into any native device hardware (remember the default of 12 fps?); but in more recent versions they have, giving us much better performance.\n\nIn this case, there&amp;#x2019;s a little video decoder on most every graphics card in every computer; Flash is now asking that little video decoder for help decoding and rendering the video to the screen -- \nthis accelerates video playback -- and therefore improves the quality of the video that you can deliver in Flash.\n\nStage Video is the latest hardware acceleration enhancement in Flash -- the history of hardware acceleration in the Flash Player goes back a few versions.\n\n\n
  18. so, as I mentioned, Flash really began as a platform-agnostic technology\nand it wasn&amp;#x2019;t until the MovieStar release of Flash Player that this really changed\n\nso in 9.0.115 we finally saw hardware acceleration put into the player, but it was really just for full-screen video playback\n\nIn 10.1\nIn Flash Player 10, the software renderer draws individual graphical elements and then the resulting image is composited to the screen by the GPU using the appropriate blend mode.\n\nthe new hardware rendering capability available in Flash Player 10.1 uses the GPU rather than with the software renderer to draw graphics. This shift yields dramatic performance improvements with optimized content. Hardware rendered objects include vector graphics, bitmaps, video, text, and filters. With hardware rendering, the GPU renders and composites graphic elements.\n\nFlash Player 10.1 hardware rendering is automatically enabled on supported devices, and it&apos;s not necessary to add the wmode=gpu embed parameter to enable it. However, when working with Flash Player 10.1, the wmode=opaque or wmode=transparent embed parameters will disable hardware rendering, causing the software to render the graphics.\n
  19. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  20. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  21. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  22. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  23. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  24. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  25. I hope that I&amp;#x2019;ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn&amp;#x2019;t really explain the feature or how it works\n\nso, to see how Stage Video works, let&amp;#x2019;s compare how Flash renders video with, and without, the Stage Video feature \n\nThe OLD (FP10 + 10.1) way\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware decoder, if available.\nThe decoder sends back the raw decoded video to Flash\nFlash composites the video with all of the other non-video visual elements This happens for each frame of the video, assuming there are no skipped frames.\nThe Flash plugin places the composited image into the web browser.\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoders sends decoded video back to Flash\nFlash composites video with other Flash content and renders as image\nImage Sent to Screen\n\n\n
  26. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  27. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  28. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  29. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  30. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  31. The NEW way, with Stage Video\n\nVideo content is downloaded or streamed from content server.\nFlash passes the video bytes directly to the hardware H.264 decoder.\nFlash instructs the decoder to render the video directly to the screen.\nFlash renders all of the non-video elements and places them on top of the rendered video.\n\nso, to be clear, because Flash tells the decoder to render directly to the screen,\nStage Video gets you even more power, than plain vanilla hardware acceleration on its own\n\nso invoking hardware acceleration (with WMODE) gets you one level of improvement in video playback performance (decoding), and using Stage Video gets you another level of performance improvement on top of that (rendering)!\n\n\nVideo downloaded from server\nFlash sends video to decoder\nDecoder renders decoded video directly on screen\nFlash renders other content to browser, above video\n\n\n
  32. \n
  33. Flash no longer has to make any calculations to render the video \nbecause, with stage video, the StageVideo object does not sit inside the Flash Player display list but sits behind the stage instead. \n
  34. \n
  35. you control Stage Video in ActionScript \nand you maximize cross-browser/device consistency of Stage Video in the embed code\n\nlet&amp;#x2019;s start with the embed code\n\n
  36. embed code is the bit of html (and possibly javascript) that you use to embed Flash into an html page\n\nand it contains several instructions on how to render the Flash\n\nthose instructions are contained in parameters, defined in the embed code\n\nmany of these parameters, such as width and height, determine how Flash is rendered in the browser\n\nanother parameter is called WMODE\n
  37. WMODE means &amp;#x201C;window mode&amp;#x201D; and those of us who&amp;#x2019;ve been working with Flash since the olden days probably remember WMODE because it&amp;#x2019;s what we used to embed transparent Flash movies in a browser\n\nNow, with most Flash movies, WMODE doesn&amp;#x2019;t matter -- you don&amp;#x2019;t even need to set it, since Flash has a default value.\n\nBut, with the introduction of hardware acceleration in the more recent versions of the Flash Player, WMODE has an increased significance\n\n\n\n
  38. WMODE has 5 possible values\n\nnow, WMODE hasn&amp;#x2019;t always had 5 values -- until a few years ago, there were only 3\nand the default behaviors have also changed over the past few versions\n\nnormal: In this mode we are using plain bitmap drawing functions to get our rasterized images to the screen. On Windows that means using BitBlt to get the image to the screen on OSX we are using CopyBits or Quartz2D if the browser supports it.\n\ntransparent: This mode tries to do alpha blending on top of the HTML page, i.e. whatever is below the SWF will show through. The alpha blending is usually fairly expensive CPU resource wise so it is advised not to use this mode in normal cases. In Internet Explorer this code path does actually not going through BitBlt, it is using a DirectDraw context provided by the browser into which we composite the SWF.\n\nopaque: Somewhat esoteric, but it is essentially like transparent, i.e. it is using DirectDraw in Internet Explorer. But instead of compositing the Flash Player just overwrites whatever is in the background. This mode behaves like normal on OSX and Linux.\n\ndirect: This mode tries to use the fastest path, or direct path, to the screen. In most cases it will ignore whatever the browser would want to do to have things like overlapping HTML menus or such work. A typical use case for this mode is video playback. On Windows this mode is using DirectDraw or Direct3D on Vista, on OSX and Linux we are using OpenGL. Fidelity should not be affected when you use this mode.\n\ngpu: This is fully fledged compositing (+some extras) using some functionality of the graphics card. Think of it being similar to what OSX and Vista do for their desktop managers, the content of windows (in flash language that means movie clips) is still rendered using software, but the result is composited using hardware. When possible we also scale video natively in the card. More and more parts of our software rasterizer might move to the GPU over the next few Flash Player versions, this is just a start. On Windows this mode uses Direct3D, on OSX and Linux we are using OpenGL.\n\n
  39. \n
  40. well, not technically\nFlash Player will try to use Stage Video if possible, no matter what\nbut, if the WMODE isn&amp;#x2019;t set to direct, Stage Video will not work in some browsers\n\nand Stage Video is available in full-screen mode regardless of what &quot;wmode&quot; you use.\n\n\n
  41. now, back to the ActionScript side\n\nthey&amp;#x2019;ve added a new ActionScript 3 API for Stage Video in Flash Player 10.2\nit&amp;#x2019;s more than a simple toggle -- you have the capacity to determine whether stage video is available, to enable and disable stage video, and to hear about changes in the Stage Video status and performance\n\n\nif you want a good intro to the AS3 API, check out this link by&amp;#xA0;Thibault Imbert\n(http://www.adobe.com/devnet/flashplayer/articles/stage_video.html)\n\n\nbut I promised that there would be almost no code in this entire talk\nand besides...\n
  42. now, back to the ActionScript side\n\nthey&amp;#x2019;ve added a new ActionScript 3 API for Stage Video in Flash Player 10.2\nit&amp;#x2019;s more than a simple toggle -- you have the capacity to determine whether stage video is available, to enable and disable stage video, and to hear about changes in the Stage Video status and performance\n\n\nif you want a good intro to the AS3 API, check out this link by&amp;#xA0;Thibault Imbert\n(http://www.adobe.com/devnet/flashplayer/articles/stage_video.html)\n\n\nbut I promised that there would be almost no code in this entire talk\nand besides...\n
  43. if Stage Video is so amazing, and if most video-on-the-web should use Stage Video (meaning it&amp;#x2019;s standard rectangular video content), why do I have to learn a bunch of new code to use it?\n\nfortunately, you don&amp;#x2019;t\n\nyou may recall that the second term in the subtitle of this talk\n\nwhich brings us to the second half of the subOSMF\n
  44. but that&amp;#x2019;s yet one more reason to use OSMF and Strobe Media Playback\n
  45. to explain what I mean when I describe OSMF as a Media Framework for Flash, it&amp;#x2019;s useful to set back a bit\n\nto begin, Flash is a Platform, composed of many tools and pieces of software\n
  46. we have the part of the platform that allows people to view Flash content\nthe Flash Player (which remains the most widely distributed piece of software in history) \nand AIR \nfor many devices and OSs\n
  47. we have the set of tools that we use to create Flash content\nFlash Professional to design and animate, \nFlash Catalyst to chop designs and create interactive prototypes,\nand Flash Builder to code\n
  48. then, of course, we have our content\nwhich is composed of media assets, like images and videos, and symbols, like movieclips and buttons\n
  49. we combine and work with these assets using ActionScript\n
  50. several years ago, Macromedia introduced the Flex Framework, \nwhich is a set of ActionScript 3 code libraries \nwhich was designed to Accelerate and Standardize\nthe process of coding. \n\nIn particular, Flex is designed to make it easier to work with these symbols, in the context of creating interactive applications\n
  51. more recently, Adobe introduced OSMF, which is a coding framework that standardizes and accelerates the process of working with the other type of content that Flash uses -- media, like images and sound files\n
  52. in this way, OSMF can be seen as completing the Flash Platform\nso much of what we work with in Flash is raw media\nand now we have a coding Framework designed to help us\n\nhelp us do what?\n
  53. specifically, OSMF makes it very easy to...\n
  54. specifically, OSMF makes it very easy to...\n
  55. specifically, OSMF makes it very easy to...\n
  56. specifically, OSMF makes it very easy to...\n
  57. specifically, OSMF makes it very easy to...\n
  58. \n... how do I get OSMF and start using it?\n
  59. \n
  60. \n
  61. \n
  62. \n
  63. Strobe is available for download\nyou can customize it without knowing any actionscript at all -- just through the embed code\nyou can even skin it with plain images, without any Flash\n\nRemember: Strobe is built on OSMF, so Strobe can do anything that OSMF can do\nand it&amp;#x2019;s not just video players, but also audio players, image slideshows, and you can mix and match in the same playlist\n\nyou can use Strobe &amp;#x201C;out-of-the-box&amp;#x201D;, or customize it...\n
  64. and Strobe is very easy to skin, too...\n\nwhile open-source means that the source code is available, and you can customize to your heart&amp;#x2019;s desire\nyou don&amp;#x2019;t have to -- you could just download and use it, without any coding\n\n
  65. easy, point-and-click setup assistant\n\nexposes all variables as simple fields\n\n[...show it...]\n\nfill them in\ncopy the embed code\nand paste it into your site (of course, don&amp;#x2019;t forget to put your Strobe player up there, too!)\n\nnow you may be thinking to yourself...\n
  66. that&amp;#x2019;s too much\nI was told there would be no code in this talk, and honestly, that section feels an awful lot like code\n\nwhat if you just want to post a video?\nthat is, you&amp;#x2019;d like to exploit the benefits of having a fully-functional, pre-built media player, but you don&amp;#x2019;t want to download any new files, or learn how to customize embed code\n
  67. that&amp;#x2019;s too much\nI was told there would be no code in this talk, and honestly, that section feels an awful lot like code\n\nwhat if you just want to post a video?\nthat is, you&amp;#x2019;d like to exploit the benefits of having a fully-functional, pre-built media player, but you don&amp;#x2019;t want to download any new files, or learn how to customize embed code\n
  68. \n
  69. simply visit this URL\nenter the URL of your video or media\nand customize anything else you want\n\nthen grab the embed code, and paste it into your website or blog\n\n\nso why am I covering OSMF and Strobe here in this talk on Stage Video and HD?\n\n\n
  70. what this means is that, if you are using OSMF (and Strobe) 1.6 or later, Flash will utilize Stage Video for video playback, if the viewer&amp;#x2019;s hardware, browser, wmode and Flash Player version support it\n
  71. when you download either OSMF or Strobe, you will see that there are two versions in the download\n\nStage Video support has been added to both\nthis means that whether you use the version of OSMF for Player 10 or 10.1, your player will utilize Stage Video if it is possible given the viewer&amp;#x2019;s hardware and Flash Player version\n\n\n
  72. when you download either OSMF or Strobe, you will see that there are two versions in the download\n\nStage Video support has been added to both\nthis means that whether you use the version of OSMF for Player 10 or 10.1, your player will utilize Stage Video if it is possible given the viewer&amp;#x2019;s hardware and Flash Player version\n\n\n
  73. when you download either OSMF or Strobe, you will see that there are two versions in the download\n\nStage Video support has been added to both\nthis means that whether you use the version of OSMF for Player 10 or 10.1, your player will utilize Stage Video if it is possible given the viewer&amp;#x2019;s hardware and Flash Player version\n\n\n
  74. when you download either OSMF or Strobe, you will see that there are two versions in the download\n\nStage Video support has been added to both\nthis means that whether you use the version of OSMF for Player 10 or 10.1, your player will utilize Stage Video if it is possible given the viewer&amp;#x2019;s hardware and Flash Player version\n\n\n
  75. now, stage video has some limitations (which I&amp;#x2019;ll cover shortly) and is not appropriate for all videos (for example, if you are animating a transparent video over other graphics)\n\nwhat if you want to disable stage video when working with OSMF? \n\nwell that brings us to the single line of code you will want to know if you&amp;#x2019;re working with OSMF\n\n\n
  76. if you want to disable Stage Video, set enableStageVideo to false \n\n...\n\nand back to true if you wish to enable Stage Video\n\nthat&amp;#x2019;s the only line of code in all of OSMF that you need for working with Stage Video\n\nand that&amp;#x2019;s just if you want to disable Stage Video\n\nand again, that&amp;#x2019;s because...\n
  77. if you want to disable Stage Video, set enableStageVideo to false \n\n...\n\nand back to true if you wish to enable Stage Video\n\nthat&amp;#x2019;s the only line of code in all of OSMF that you need for working with Stage Video\n\nand that&amp;#x2019;s just if you want to disable Stage Video\n\nand again, that&amp;#x2019;s because...\n
  78. the key point of this part of the talk is that OSMF makes Stage Video easy, like it should be\nyou don&amp;#x2019;t need to learn or use any new code to ensure your viewers see the best, highest-quality HD video that their devices can support!\n\nif you want Stage Video to be easy, then use OSMF and Strobe\n\nbut as I say, OSMF makes a lot more easy than just Stage Video\nfor instance, how about building a Dynamic Streaming Video player with only about 10 lines of code and no components!\nOSMF does that, and a whole lot else\n
  79. thus far I&amp;#x2019;ve been talking about the advances in Flash Player hardware acceleration\nbut there&amp;#x2019;s another side to this -- the media that we use\n\nin terms of optimizing hardware accelerated video playback, not all video is created the same\n
  80. when we&amp;#x2019;re talking about optimizing your video for maximum performance in Flash\nwe&amp;#x2019;re talking about using H.264 video\n\nIt is important to understand that Stage Video can work with any video codec, \nbut H.264 is StageVideo&apos;s best friend to get the full GPU acceleration (decoding+blitting).\n\nwhat is H.264?\nIt is a really popular and flexible video codec\n
  81. there are a lot of video codecs\nand, many people don&amp;#x2019;t realize that new ones emerge all the time\nindeed, the improvement in codecs has been a major aspect of the improvement of online video experiences in the past decade\n\n
  82. with many types of files, all we think about is the format\nfor example, if a file ends with &amp;#x201C;.mp3&amp;#x201D; we know it plays MP3 audio content\n\nwith video, it&amp;#x2019;s a little more complex\n...\n\nso a .MOV file can contain different CODECs, such as H.264 or Apple Intermediate Codec\nand an FLV can contain video compressed with the Spark codec or the VP6 codec\n\n\n
  83. with many types of files, all we think about is the format\nfor example, if a file ends with &amp;#x201C;.mp3&amp;#x201D; we know it plays MP3 audio content\n\nwith video, it&amp;#x2019;s a little more complex\n...\n\nso a .MOV file can contain different CODECs, such as H.264 or Apple Intermediate Codec\nand an FLV can contain video compressed with the Spark codec or the VP6 codec\n\n\n
  84. with many types of files, all we think about is the format\nfor example, if a file ends with &amp;#x201C;.mp3&amp;#x201D; we know it plays MP3 audio content\n\nwith video, it&amp;#x2019;s a little more complex\n...\n\nso a .MOV file can contain different CODECs, such as H.264 or Apple Intermediate Codec\nand an FLV can contain video compressed with the Spark codec or the VP6 codec\n\n\n
  85. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  86. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  87. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  88. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  89. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  90. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  91. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  92. for example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nFlash supports H.264, but it is one of many supported video codecs \n\nto put H.264 into context in the Flash world...\n
  93. support was added incrementally \n\nthis is included mostly for reference\nbut it&amp;#x2019;s useful to see how much effort has been put into improving the video experience in Flash over the past several versions\n\nit also helps explain why Flash can play so many different types of video -- again, because each codec was added with a different player version\n\nyou see in version 9.0.115 Adobe added support for H.264 video into the Player -- that was the big one\n\nwhy?\n
  94. unlike many other codecs, which are optimized around one bitrate, h.264 can look good at a wide range of bitrates\n\nfor example, VP6 has a sweet spot around 1mbps\n\nwhereas H.264 looks good \nfrom the tiny\nfor example, cell phones\n\nto the huge\nfor example, high definition Blu-Ray\n
  95. \n
  96. unlike Spark and VP6\n\n\n\n
  97. \n
  98. because H.264 is such a popular and easy-to-work-with standard, many hardware manufacturers have created graphics processors that are optimized to decode and play H.264 video\n\nthat&amp;#x2019;s why it was possible for Adobe to add hardware-accelerated video playback. \nSince Flash supports H.264, and because so many of the devices we already use are optimized for H.264, Adobe tapped into the powers of the viewer&amp;#x2019;s device to improve the playback of H.264 video\n\nso how do you get your video into H.264?\n
  99. \n
  100. \n
  101. \n
  102. as we&amp;#x2019;ve seen, Stage Video changes the way that video is rendered to the screen, to optimize video playback\nchanging the way that video is rendered comes with some trade-offs\n\nand if any of these trade-offs limit what you need to do with Stage Video, you will want to ensure that Stage Video is disabled\n
  103. if you&amp;#x2019;re using OSMF, and try to play 9 videos at once, it will play 8 with Stage Video optimization, and the 9th without it\n
  104. if you&amp;#x2019;re using OSMF, and try to play 9 videos at once, it will play 8 with Stage Video optimization, and the 9th without it\n
  105. if you&amp;#x2019;re using OSMF, and try to play 9 videos at once, it will play 8 with Stage Video optimization, and the 9th without it\n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. This means that the Flash plugin can&apos;t be placed above or below any HTML entities on a web page. \n\n(on some browsers with CoreAnimation like Chrome or Safari or latest versions of Firefox, StageVideo will be available when using wmode=transparent) but because some browsers may not, developers will encounter inconsistencies, so technically StageVideo can work with wmode=transparent but we strongly discourage using it and ask developers to always use wmode=direct.\n
  113. so, in summary, the 10 second version of this talk is\n...\n
  114. so, in summary, the 10 second version of this talk is\n...\n
  115. so, in summary, the 10 second version of this talk is\n...\n
  116. so, in summary, the 10 second version of this talk is\n...\n
  117. so, in summary, the 10 second version of this talk is\n...\n
  118. so, in summary, the 10 second version of this talk is\n...\n
  119. \n