Written for FITC Toronto 2011, by R Blank
Video in Flash just keeps getting better and better. Now, with Flash Player 10.2, you can deliver higher quality HD video to a much wider audience.
Using the new Stage Video feature, you can deliver the best possible viewing experience, of the highest quality video content -- while reducing processor usage by up to 85%!
And, even better, the latest version of the Open Source Media Framework (OSMF, www.osmf.org ), and the OSMF-based Strobe Media Playback, include native support for Stage Video, making it incredibly easy for any user of Flash to start harnessing the amazing playback powers of Stage Video in Flash Player 10.2.
Come join OSMF-guru R Blank as he dives into the new feature of Stage Video, and how best to exploit it in your OSMF projects, from understanding how it works, to optimizing your HD video content for playback.
This talk is for ALL audiences, including designers, developers, and anyone who works with video in Flash. Very little code will be covered.
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
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
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
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
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
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
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
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
download slides and all code @ http://labs.almerblank.com \n\n
I’m R Blank\nI’m the CTO at almer/blank\nwe’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
in addition to my work at almer/blank\n\n...\n\nI’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
in addition to my work at almer/blank\n\n...\n\nI’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
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’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
so, to explain how to optimize your HD video delivery in Flash, let’s start with stage video\n\nwhich is the name of the new feature in Flash that improves video performance\n
stage video can deliver...\n
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
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
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
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
for years, video quality was limited more by:\n- bandwidth\n- video compression format options\n- computing power\n\nnow, those aren’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
by trimming overhead \n\n...\n\nand tapping into hardware acceleration\n\nfirst, what does overhead savings mean?\n\n\n
by trimming overhead \n\n...\n\nand tapping into hardware acceleration\n\nfirst, what does overhead savings mean?\n\n\n
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’t need any fancy Flash treatment\n-- it’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’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’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’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
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’re talking specifically about video playback performance.\n\nfor those who don’t know, hardware is much more powerful than software for this type of task. For years, Flash didn’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’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
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’re talking specifically about video playback performance.\n\nfor those who don’t know, hardware is much more powerful than software for this type of task. For years, Flash didn’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’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
so, as I mentioned, Flash really began as a platform-agnostic technology\nand it wasn’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'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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
I hope that I’ve clearly expressed the benefits and purpose of Stage Video\n -- but just saying that we trim overhead and use hardware acceleration doesn’t really explain the feature or how it works\n\nso, to see how Stage Video works, let’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
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
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
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
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
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
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
\n
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
\n
you control Stage Video in ActionScript \nand you maximize cross-browser/device consistency of Stage Video in the embed code\n\nlet’s start with the embed code\n\n
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
WMODE means “window mode” and those of us who’ve been working with Flash since the olden days probably remember WMODE because it’s what we used to embed transparent Flash movies in a browser\n\nNow, with most Flash movies, WMODE doesn’t matter -- you don’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
WMODE has 5 possible values\n\nnow, WMODE hasn’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
\n
well, not technically\nFlash Player will try to use Stage Video if possible, no matter what\nbut, if the WMODE isn’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 "wmode" you use.\n\n\n
now, back to the ActionScript side\n\nthey’ve added a new ActionScript 3 API for Stage Video in Flash Player 10.2\nit’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 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
now, back to the ActionScript side\n\nthey’ve added a new ActionScript 3 API for Stage Video in Flash Player 10.2\nit’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 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
if Stage Video is so amazing, and if most video-on-the-web should use Stage Video (meaning it’s standard rectangular video content), why do I have to learn a bunch of new code to use it?\n\nfortunately, you don’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
but that’s yet one more reason to use OSMF and Strobe Media Playback\n
to explain what I mean when I describe OSMF as a Media Framework for Flash, it’s useful to set back a bit\n\nto begin, Flash is a Platform, composed of many tools and pieces of software\n
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
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
then, of course, we have our content\nwhich is composed of media assets, like images and videos, and symbols, like movieclips and buttons\n
we combine and work with these assets using ActionScript\n
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
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
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
specifically, OSMF makes it very easy to...\n
specifically, OSMF makes it very easy to...\n
specifically, OSMF makes it very easy to...\n
specifically, OSMF makes it very easy to...\n
specifically, OSMF makes it very easy to...\n
\n... how do I get OSMF and start using it?\n
\n
\n
\n
\n
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’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 “out-of-the-box”, or customize it...\n
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’s desire\nyou don’t have to -- you could just download and use it, without any coding\n\n
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’t forget to put your Strobe player up there, too!)\n\nnow you may be thinking to yourself...\n
that’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’d like to exploit the benefits of having a fully-functional, pre-built media player, but you don’t want to download any new files, or learn how to customize embed code\n
that’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’d like to exploit the benefits of having a fully-functional, pre-built media player, but you don’t want to download any new files, or learn how to customize embed code\n
\n
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
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’s hardware, browser, wmode and Flash Player version support it\n
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’s hardware and Flash Player version\n\n\n
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’s hardware and Flash Player version\n\n\n
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’s hardware and Flash Player version\n\n\n
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’s hardware and Flash Player version\n\n\n
now, stage video has some limitations (which I’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’re working with OSMF\n\n\n
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’s the only line of code in all of OSMF that you need for working with Stage Video\n\nand that’s just if you want to disable Stage Video\n\nand again, that’s because...\n
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’s the only line of code in all of OSMF that you need for working with Stage Video\n\nand that’s just if you want to disable Stage Video\n\nand again, that’s because...\n
the key point of this part of the talk is that OSMF makes Stage Video easy, like it should be\nyou don’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
thus far I’ve been talking about the advances in Flash Player hardware acceleration\nbut there’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
when we’re talking about optimizing your video for maximum performance in Flash\nwe’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'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
there are a lot of video codecs\nand, many people don’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
with many types of files, all we think about is the format\nfor example, if a file ends with “.mp3” we know it plays MP3 audio content\n\nwith video, it’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
with many types of files, all we think about is the format\nfor example, if a file ends with “.mp3” we know it plays MP3 audio content\n\nwith video, it’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
with many types of files, all we think about is the format\nfor example, if a file ends with “.mp3” we know it plays MP3 audio content\n\nwith video, it’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
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
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
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
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
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
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
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
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
support was added incrementally \n\nthis is included mostly for reference\nbut it’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
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
\n
unlike Spark and VP6\n\n\n\n
\n
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’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’s device to improve the playback of H.264 video\n\nso how do you get your video into H.264?\n
\n
\n
\n
as we’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
if you’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
if you’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
if you’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
\n
\n
\n
\n
\n
\n
This means that the Flash plugin can'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
so, in summary, the 10 second version of this talk is\n...\n
so, in summary, the 10 second version of this talk is\n...\n
so, in summary, the 10 second version of this talk is\n...\n
so, in summary, the 10 second version of this talk is\n...\n
so, in summary, the 10 second version of this talk is\n...\n
so, in summary, the 10 second version of this talk is\n...\n