Delivering the Best Flash HD Video by R Blank from Adobe MAX 2011

  • 2,110 views
Uploaded on

These are the slides that accompany R Blank's session from Adobe MAX 2011, 'Delivering the Best Flash HD Video'. …

These are the slides that accompany R Blank's session from Adobe MAX 2011, 'Delivering the Best Flash HD Video'.

Video in Flash just keeps getting better and better. Now, with the recent releases of Adobe Flash Player, you can deliver even 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 HD video content — while reducing processor usage by up to 85%!

Come join R Blank as he dives into the new feature of Stage Video, how it works, and how to optimize your content for Stage Video delivery. As well, Blank will cover the AS3 APIs for Stage Video, illustrating how to write your ActionScript code to utilize this new feature.

Even better, Blank will cover how to use the Open Source Media Framework (OSMF, www.osmf.org), which includes 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.

The portion on the AS3 APIs is intended for Flash ActionScript coders. The remainder of this talk is for ALL audiences, including designers, developers, and anyone who works with video in Flash.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,110
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • load:\n\nquicktime (with a video in it)\nadobe media encoder (with a video in it)\nffmpegx (with a video in it)\nactivity monitor\nflash pro (for publish settings)\nsimple demo and complex demo AS files\n\n\nhave ready:\nstage video demo (if internet access)\nstrobe setup.html\n\n\n
  • I’m R Blank\nI’m the CTO at almer/blank\nwe’re an Adobe Solution Partner for the Flash Platform\nbased here, in Venice Beach, California\n\nand we craft outstanding digital experiences for Fortune 500 companies\n\nsuch as these...\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
  • before I begin\nI would like to request that everybody take the time to fill out the session scorecard at the end\nI read through all feedback very closely and try very hard to incorporate it into my talks\nthe more feedback you give me, the better my talks are\n\n\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\nand again, this is for all devices that Flash reaches...\n\nwhich devices?\n\n
  • well, of course, mac and pc desktops\n\n
  • android tablets, phones and set-top boxes\n\nand\n
  • iPads, iPhones, and iPods\n
  • the blackberry playbook\n
  • and samsung TVs as well as set-top boxes from other manufacturers\n\njust take a moment to digest this landscape\nthere is no other single technology (except, of course, for in-browser HTML) that you can use to reach all of these platforms, operating systems and devices\n\nnow, because StageVideo is still being rolled out\nstill isn’t incorporated into AIR for desktop (Mac and PC)\n\nStageVideo only works on Android Honeycomb and later\n\nand, in general, as I’ll explain in a little bit\nthe power of StageVideo isn’t necessarily always going to be available to you\ndepending on the hardware, software, configuration, and what else is happening on the device\n\nthat said, StageVideo...>\n\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \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 newest feature in Flash that helps improve video performance\n\nAvailable in FP 10.2 that gets you\n...\n\n[in Flash] on every device that Flash runs on\n\nfor 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\nto send better, fatter videos down the pipe \n\n
  • launch the performance demo\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\nso let’s approach these one at a time\n\nfirst, what does overhead savings mean?\n\n\n
  • by trimming overhead \n\n...\n\nand tapping into hardware acceleration\n\nso let’s approach these one at a time\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\nthat’s what we mean by reducing overhead\nso next we have...>\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
  • 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
  • 10.3 is not on here, because it doesn’t really have a lot relevant to this slide\nbut Flash Player 11 certainly will\n\nso, 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
  • 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
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • beyond that, there are some limitations to StageVideo\nwhich are intrinsic, given how I’ve just explained StageVideo works\n\n---\nand, remember that stage video will not always be available\ndepending on the platform, the browser, and how your SWF content is set to render\n
  • it is important, because for StageVideo to work consistently, across platforms, you will need to ensure that your embed code is configured properly\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\nthere are five possible values for WMODE\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
  • on a related point...\n\n\nThis means that, to optimize playback, the Flash plugin should not 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
  • 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\nto put this in context, let’s see what types of video codecs are supported in Flash\n\nfirst, what is a codec\n...>\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\nnow...>\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\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\nfor example, there are plenty of .mov files that are not H.264; \nsome .mp4 video podcasts are h.264 and some are not\n\nSo you do not necessarily know the codec, from the file name\n\n\n...\nnow getting back to Flash\n\n...>\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
  • when we’re talking about optimizing your video for maximum performance in Flash\nwe’re talking about using the H.264 video codec\n\nIt is important to understand that Stage Video can work with any Flash-supported 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
  • 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\n\n\n\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\n\n\n\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\n\n\n\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\n\n\n\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\n\n\n\n
  • Which is why you encode using the H.264 codec to get the best Flash video\n\nprecisely because many hardware manufacturers have created graphics processors that are optimized to decode and play H.264 video\n\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\nseen another way, with hardware acceleration there are basically four paths for your video to get to the viewer’s screen\n...>\n
  • Note that, re: Direct Path, on Mac OS, hardware decoding of the H.264 video stream is available starting only with Snow Leopard, Mac OS 10.6.3.\n\n\n...h264 is so popular\nthat your video may already be h264\nhow can you find out?\n
  • \n
  • part of CS\n
  • there are ports of FFMPEG for many platforms\nFFMPEGx is the port for Mac, which I have installed\n
  • \n
  • The Open Source Media Framework is an ActionScript 3 code library, published by Adobe\n\nand before getting into more details, I would like to try to explain it’s position and purpose in the Flash Platform\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, \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\n\n
  • specifically, OSMF makes it very easy to...\n\n\n
  • specifically, OSMF makes it very easy to...\n\n\n
  • specifically, OSMF makes it very easy to...\n\n\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • and when I say “media”, I mean all Flash media types\n\n...why am I covering OSMF here?...\n
  • stage video baked in, out-of-the-box since OSMF 1.6\nmeaning you do not have to do anything else to get the benefits of StageVideo with OSMF\n\n\n
  • if, for some reason, you wanted to disable Stage Video while using OSMF, you can use this simple, single line of code\n\nsetting 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\n\n
  • if, for some reason, you wanted to disable Stage Video while using OSMF, you can use this simple, single line of code\n\nsetting 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\n\n
  • \n
  • \n
  • if your answer is the FLVPlayback component, you’re way out of date!\n\nbecause Adobe has two new options that, between the two, are powerful, flexible AND simple\n\nthe first is called Strobe\n...>\n
  • if your answer is the FLVPlayback component, you’re way out of date!\n\nbecause Adobe has two new options that, between the two, are powerful, flexible AND simple\n\nthe first is called Strobe\n...>\n
  • if your answer is the FLVPlayback component, you’re way out of date!\n\nbecause Adobe has two new options that, between the two, are powerful, flexible AND simple\n\nthe first is called Strobe\n...>\n
  • Strobe is an open-source fully functional media player, developed by Adobe\n\nStrobe can play any supported Flash media type, or a playlist of different media files\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\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
  • What if you don’t want to download and learn Strobe?\nWhat if you don’t want to even open Flash Pro?\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
  • 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
  • as with OSMF (on which they are built), Strobe Media Playback and Flash Media Playback both automatically support and use StageVideo\nwhat 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\nand this is true, whether you use them as-is, or whether you get under the hood and start customizing\n
  • now, for our final section, we get into a bit of code\nand see how we work with Stage Video in ActionScript 3\n
  • in ActionScript\nthe StageVideo class replaces the Video class\n(which you are familiar with if you are used to coding with video in Flash)\n\nso we still have the NetConnection and NetStream and they still behave the same way\n\nit’s just that we have a new way of displaying the video\n\n\n
  • so, instead of attaching our NetStream to our Video object like this\n...\nwe would attach the NetStream to our StageVideo object, like this\n\n...\nso playing video, with StageVideo, is the same as it was before\n\nbut, because of the changes with StageVideo, actually displaying the video is a bit different\n
  • so, instead of attaching our NetStream to our Video object like this\n...\nwe would attach the NetStream to our StageVideo object, like this\n\n...\nso playing video, with StageVideo, is the same as it was before\n\nbut, because of the changes with StageVideo, actually displaying the video is a bit different\n
  • but there are some significant differences between the behavior of the Video object and the StageVideo object\n\nlet’s see what some of the key differences are\n
  • [re: “You do NOT add StageVideo instances to the display list!”]\nremember from the earlier diagram that StageVideo renders beneath the Display List\nthat’s why you don’t add it to the Display List\n\nnow a few key\n
  • [re: “You do NOT add StageVideo instances to the display list!”]\nremember from the earlier diagram that StageVideo renders beneath the Display List\nthat’s why you don’t add it to the Display List\n\nnow a few key\n
  • [re: “You do NOT add StageVideo instances to the display list!”]\nremember from the earlier diagram that StageVideo renders beneath the Display List\nthat’s why you don’t add it to the Display List\n\nnow a few key\n
  • \n
  • \n
  • \n
  • \n
  • never rely purely on StageVideo\nit may be unavailable\nit may become unavailable\n\nalways include a back-up video\n
  • never rely purely on StageVideo\nit may be unavailable\nit may become unavailable\n\nalways include a back-up video\n
  • (Like MovieClip and Video Objects Are)\n\nYou do NOT add StageVideo Instances to the Display List\n\nremember from the earlier diagram that StageVideo renders beneath the Display List\nthat’s why you don’t add it to the Display List\n\nnow a few key\n
  • (Like MovieClip and Video Objects Are)\n\nYou do NOT add StageVideo Instances to the Display List\n\nremember from the earlier diagram that StageVideo renders beneath the Display List\nthat’s why you don’t add it to the Display List\n\nnow a few key\n
  • so, how do you access the StageVideo objects that Flash creates for you?\n\nwith the stageVideos vector, which is on the stage\n(if you don’t know, a Vector is just like an Array, but it can contain data of only one type -- in this case, StageVideo objects)\n
  • so, how do you access the StageVideo objects that Flash creates for you?\n\nwith the stageVideos vector, which is on the stage\n(if you don’t know, a Vector is just like an Array, but it can contain data of only one type -- in this case, StageVideo objects)\n
  • so, how do you access the StageVideo objects that Flash creates for you?\n\nwith the stageVideos vector, which is on the stage\n(if you don’t know, a Vector is just like an Array, but it can contain data of only one type -- in this case, StageVideo objects)\n
  • so, how do you access the StageVideo objects that Flash creates for you?\n\nwith the stageVideos vector, which is on the stage\n(if you don’t know, a Vector is just like an Array, but it can contain data of only one type -- in this case, StageVideo objects)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • just as before\n\nremember, the role and functionality of the netstream does not change!\nit’s the same as it’s been since Flash 7\n
  • \n
  • you need to do this, not only to size your video, but to see it at all!\n
  • because of the timing of the event, and the data it contains, it is useful for a couple of purposes...\n
  • because of the timing of the event, and the data it contains, it is useful for a couple of purposes...\n
  • these values are available when the StageVideoEvent fires\n
  • these values are available when the StageVideoEvent fires\n
  • these values are available when the StageVideoEvent fires\n
  • these values are available when the StageVideoEvent fires\n
  • If you see software decoding, then you can try switching to another video stream—such as H.264 or a stream with different dimensions—to give better chances to have it decoded on the GPU\n\nIf hardware decoding is suddenly unavailable, you can fall back to a non-GPU accelerated codec to force software decoding\n\n
  • \n
  • \n
  • \n
  • only works on zoomed video\n
  • only works on zoomed video\n
  • only works on zoomed video\n
  • re: depth\nby default, StageVideo instances are rendered in order.\nFirst, Flash renders the 1st StageVideo;\nThen Flash renders the 2nd StageVideo on top of the 1st;\nThen Flash renders the 3rd StageVideo on top of the 2nd;\nAnd so on\nwith the depth property, you can control that\n\nre: colorspaces (not in the AS docs yet)\nthe player will try to match the color space of the StageVideo to the color space of the video stream if possible\nelse, it will use the closest match\nIf "unknown" is returned, the platform does not offer a way to query the actual color space being used.\n\n
  • re: depth\nby default, StageVideo instances are rendered in order.\nFirst, Flash renders the 1st StageVideo;\nThen Flash renders the 2nd StageVideo on top of the 1st;\nThen Flash renders the 3rd StageVideo on top of the 2nd;\nAnd so on\nwith the depth property, you can control that\n\nre: colorspaces (not in the AS docs yet)\nthe player will try to match the color space of the StageVideo to the color space of the video stream if possible\nelse, it will use the closest match\nIf "unknown" is returned, the platform does not offer a way to query the actual color space being used.\n\n
  • re: depth\nby default, StageVideo instances are rendered in order.\nFirst, Flash renders the 1st StageVideo;\nThen Flash renders the 2nd StageVideo on top of the 1st;\nThen Flash renders the 3rd StageVideo on top of the 2nd;\nAnd so on\nwith the depth property, you can control that\n\nre: colorspaces (not in the AS docs yet)\nthe player will try to match the color space of the StageVideo to the color space of the video stream if possible\nelse, it will use the closest match\nIf "unknown" is returned, the platform does not offer a way to query the actual color space being used.\n\n
  • re: depth\nby default, StageVideo instances are rendered in order.\nFirst, Flash renders the 1st StageVideo;\nThen Flash renders the 2nd StageVideo on top of the 1st;\nThen Flash renders the 3rd StageVideo on top of the 2nd;\nAnd so on\nwith the depth property, you can control that\n\nre: colorspaces (not in the AS docs yet)\nthe player will try to match the color space of the StageVideo to the color space of the video stream if possible\nelse, it will use the closest match\nIf "unknown" is returned, the platform does not offer a way to query the actual color space being used.\n\n
  • properly sized\n\nwith pan and zoom functionality\n\nand some additional info in the trace output\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
  • 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
  • once again, I would ask that you please take the time to provide feedback on this session with your scorecard\n
  • \n

Transcript

  • 1. Delivering the Best Flash HD Video R Blank CTO©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 2. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  • 3. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  • 4. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 5. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 6. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 7. Please Fill Out the Scorecard©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  • 8. Today... Getting Outstanding HD to Every Device w/Flash©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  • 9. Current Flash Platform Device Support©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
  • 10. Current Flash Platform Device Support©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
  • 11. Current Flash Platform Device Support©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
  • 12. Current Flash Platform Device Support©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
  • 13. Current Flash Platform Device Support©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  • 14. Stage Video Enhances Video on Many Screens©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  • 15. In This Session...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 16. In This Session... 1. StageVideo ■ What it is, how it Works, and its Limitations©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 17. In This Session... 1. StageVideo ■ What it is, how it Works, and its Limitations 2. Video ■ Optimizing Encoding for StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 18. In This Session... 1. StageVideo ■ What it is, how it Works, and its Limitations 2. Video ■ Optimizing Encoding for StageVideo 3. OSMF & Strobe ■ Options to use StageVideo with no Code©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 19. In This Session... 1. StageVideo ■ What it is, how it Works, and its Limitations 2. Video ■ Optimizing Encoding for StageVideo 3. OSMF & Strobe ■ Options to use StageVideo with no Code 4. AS3 APIs ■ The ActionScript to Make StageVideo Work©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 20. Stage Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  • 21. Stage Video ■ Stage Video (FP 10.2+) is Just Better©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 22. Stage Video ■ Stage Video (FP 10.2+) is Just Better ■ Higher-Res©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 23. Stage Video ■ Stage Video (FP 10.2+) is Just Better ■ Higher-Res ■ Higher-Framerate©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 24. Stage Video ■ Stage Video (FP 10.2+) is Just Better ■ Higher-Res ■ Higher-Framerate ■ HD Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 25. Stage Video ■ Stage Video (FP 10.2+) is Just Better ■ Higher-Res ■ Higher-Framerate ■ HD Video ■ In Flash©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 26. Stage Video ■ Stage Video (FP 10.2+) is Just Better ■ Higher-Res ■ Higher-Framerate ■ HD Video ■ In Flash ■ Up to 85% Performance Savings!©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 27. Performance Demo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  • 28. How?©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  • 29. How? Overhead Savings©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  • 30. How? Overhead Savings & Hardware Acceleration©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  • 31. A Slimmer Video Player©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  • 32. Hardware Acceleration Means...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 33. Hardware Acceleration Means... Tapping into the Power of the Viewer’s Device©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 34. Hardware Acceleration Means... Tapping into the Power of the Viewer’s Device To Accelerate Playback©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 35. Hardware Acceleration Support in Flash Player Player Support Added 9.0.115 H.264 and Full-Screen Hardware Acceleration 10 Added Hardware Acceleration in Normal View 10.1 Improved GPU acceleration 10.2 Stage Video 11 Stage 3D©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  • 36. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 37. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 38. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 39. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 40. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 41. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 42. Hardware Acceleration with Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 43. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 44. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 45. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 46. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 47. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 48. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 49. Hardware Acceleration with StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 50. Hardware Acceleration Comparison With Video With StageVideo The decoder renders the video and Flash Flash renders the video and all graphics draws on top of it©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
  • 51. Getting started with stage video | Adobe Developer Connection 3/14/11 12:56 PM by making immersive HD video experiences on the web possible. Recent implementations of Flash Player With Video 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. With StageVideo The traditional method for rendering video in Flash Player uses the Video object. The Video object is Getting started with stage video | Adobe Developer Connection 3/14/11 12:56 PM treated the same as any other object on the stage, which gives developers an unprecedented amount of creative control. For example, video can be displayed on each face of a spinning cube, or multiple videos Player display list but sits behind the stage instead. Figure 2 illustrates this design. can be blended together with one another. The Video object is treated as any other DisplayObject. Figure 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 Flash renders the video and all video frame. Depending on the power of the underlying device, this increased processing may decrease the frame rate of the video, or it may increase the load that Flash Player places on the CPU. The decoder renders the video powerful video decoders capable of rendering high-quality video content with very little CPU usage. However, even on the desktop, stage video will dramatically change video performance in Flash Player. graphics A new way to render video and Flash draws on top of it As a developer, you must understand that stage video is the second step of enhancements related to video GPU acceleration in Flash Player. The first step is encoding the video so as to take best advantage of the 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 stage will need to have the two steps enabled. The H.264 codec is stage videos best friend; using this will ensure video as a new way to render video. This approach takes full advantage of the underlying video hardware. you get full GPU acceleration from video decoding to rendering. With this approach, no read-back (sending the data from the GPU to the CPU) is required to composite the video frames in the display list The result is a much lower load on the CPU, which translates into higher frame rates on less powerful anymore. The YUV 4:2:0 formatted video frames are converted to RGB through a GPU shader (DirectX9 or devices and also less memory usage. With stage video, the StageVideo object does not sit inside the Flash OpenGL) and blitted onscreen. As a result, you will see higher pixel fidelity and some reduction in CPU and memory usage. http://www.adobe.com/devnet/flashplayer/articles/stage_video.html Page 3 of 18 http://www.adobe.com/devnet/flashplayer/articles/stage_video.html Page 4 of 18©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  • 52. Stage Video Limitations©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 53. Stage Video Limitations ■ You Can’t...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 54. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 55. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 56. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 57. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 58. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees ■ Apply 3D, color or skewing transformations©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 59. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees ■ Apply 3D, color or skewing transformations ■ Apply alpha channel, blendMode, filter, mask, or scale9Grid transformations©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 60. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees ■ Apply 3D, color or skewing transformations ■ Apply alpha channel, blendMode, filter, mask, or scale9Grid transformations ■ Copy the video into BitmapData or Bitmap-cache the video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 61. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees ■ Apply 3D, color or skewing transformations ■ Apply alpha channel, blendMode, filter, mask, or scale9Grid transformations ■ Copy the video into BitmapData or Bitmap-cache the video ■ Embed the video in an FLA/XFL (only NetStream playback)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 62. Stage Video Limitations ■ You Can’t... ■ Have more than 8 concurrent videos on desktop ■ Or more than 1 on mobile devices ■ Freely rotate the video ■ Can only rotate @ 0, 90, 180, 270 degrees ■ Apply 3D, color or skewing transformations ■ Apply alpha channel, blendMode, filter, mask, or scale9Grid transformations ■ Copy the video into BitmapData or Bitmap-cache the video ■ Embed the video in an FLA/XFL (only NetStream playback) ■ Remember: Stage Video is not always available©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 63. For Best Results ■ Maximize Cross-Browser & Device Consistency in the Flash Embed Code ■ By Setting WMODE to ■ “gpu” (FP 10.2 or 10.3) ■ “direct” (FP 10.1, 10.2 or 10.3)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
  • 64. WMODE <param name="wmode" value="direct" />©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  • 65. WMODE Settings Setting Meaning window Render SWF in its own window opaque Render SWF opaquely, above other browser content transparent Render SWF transparently, below other browser content direct Use the fastest path to screen to render Invoke hardware acceleration from the graphics card to gpu render Default since 10.1©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  • 66. And so... ■ You Shouldn’t... ■ Use Stage Video with transparent SWFs©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  • 67. Optimizing Encoding for Stage Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  • 68. CODEC Code that COmpresses & DECompresses Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  • 69. Codecs and Containers©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 70. Codecs and Containers ■ Video is Compressed with a Codec©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 71. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 72. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.:©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 73. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.: ■ a .MOV May be Encoded with H.264 Codec or Animation Codec or Others©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 74. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.: ■ a .MOV May be Encoded with H.264 Codec or Animation Codec or Others ■ an .FLV May be Encoded with Spark Codec or VP6 Codec©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 75. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.: ■ a .MOV May be Encoded with H.264 Codec or Animation Codec or Others ■ an .FLV May be Encoded with Spark Codec or VP6 Codec ■ H.264 is Used in Many Formats, Including:©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 76. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.: ■ a .MOV May be Encoded with H.264 Codec or Animation Codec or Others ■ an .FLV May be Encoded with Spark Codec or VP6 Codec ■ H.264 is Used in Many Formats, Including: ■ .mp4 | .f4v | .m4v | .m4a | .mov | .3gp©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 77. Codecs and Containers ■ Video is Compressed with a Codec ■ Then Stored in a File with a Format (or Container) ■ So the Same Type of Container Can Have Different Codecs, E.g.: ■ a .MOV May be Encoded with H.264 Codec or Animation Codec or Others ■ an .FLV May be Encoded with Spark Codec or VP6 Codec ■ H.264 is Used in Many Formats, Including: ■ .mp4 | .f4v | .m4v | .m4a | .mov | .3gp ■ But, Not All Files of Those Types Use H.264©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 78. History of Video Support in Flash Ver Codec Notes 4/5 SWF Motion JPG Variant from Wildform Flix Sorensen Spark 6 Streaming only; MetaData & CuePoints 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-Screen; OSMF & 10 Strobe Introduced 10.2 Stage Video on Desktop & Mobile with mode=”direct”©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
  • 79. H.264©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  • 80. H.264...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 81. H.264... ■ Looks Good at Many Bitrates©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 82. H.264... ■ Looks Good at Many Bitrates ■ Encodes Relatively Quickly©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 83. H.264... ■ Looks Good at Many Bitrates ■ Encodes Relatively Quickly ■ Is Not Owned/Controlled by Any One Company ■ http://www.mpegla.com©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 84. H.264... ■ Looks Good at Many Bitrates ■ Encodes Relatively Quickly ■ Is Not Owned/Controlled by Any One Company ■ http://www.mpegla.com ■ Is Already Used by Many Firms in Their Products ■ e.g. Apple, Sony, Nokia, SanDisk, Blackberry and Microsoft©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 85. H.264... ■ Looks Good at Many Bitrates ■ Encodes Relatively Quickly ■ Is Not Owned/Controlled by Any One Company ■ http://www.mpegla.com ■ Is Already Used by Many Firms in Their Products ■ e.g. Apple, Sony, Nokia, SanDisk, Blackberry and Microsoft ■ Is Pre-Installed on Tons of Devices ■ e.g., Blu-ray, PS3, XBox, iPhone, and all Video Mobile Devices©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  • 86. Encode With H.264 to Deliver the Best Flash Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
  • 87. Video Rendering Paths If you are using... Then Flash will use... Object Codec Decoding Compositing Video Non-Accelerated CPU CPU Video Accelerated (H.264) GPU CPU StageVideo Non-Accelerated CPU GPU StageVideo Accelerated (H.264) GPU GPU The “Direct Path” with best performance©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
  • 88. Checking Your Codec©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
  • 89. Checking Your Codec ■ on Mac with QuickTime ■ on PC with G-Spot ■ Load Video into Quicktime ■ Load any video; check Codec Player ■ http://gspot.headbands.com ■ Load Info Window (Window> Show Movie Inspector)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
  • 90. Creating H.264 with Adobe Media Encoder ■ On the Main Screen, Choose ■ Or, in the Export Settings, any F4V Preset (not FLV) click the “Format” tab, and Select “F4V” (not FLV)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
  • 91. Creating H.264 with FFMPEGx ■ FFMPEG is a Multi- Platform, Open-Source Encoder ■ Get FFMPEGx for Mac http://homepage.mac.com/ major4/ ■ Select a Video Setting That Has ‘H264’ in the Name©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
  • 92. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  • 93. Open Source Media Framework http://osmf.org©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
  • 94. Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
  • 95. Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  • 96. Content Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
  • 97. Content Code Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
  • 98. Content Code Application Framework Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
  • 99. Content Code Application Framework Media Framework Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
  • 100. Content Code Application Framework Media Framework Creation Tools Delivery Platform©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
  • 101. OSMF Makes it Easy To...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  • 102. OSMF Makes it Easy To... ■ Load,©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  • 103. OSMF Makes it Easy To... ■ Load, ■ Play©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  • 104. OSMF Makes it Easy To... ■ Load, ■ Play ■ & Display©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  • 105. OSMF Makes it Easy To... ■ Load, ■ Play ■ & Display ■ Media©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  • 106. Supported Flash Media Types©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 107. Supported Flash Media Types ■ Streaming Audio ■ mp3, AAC, Speex, and Nellymoser©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 108. Supported Flash Media Types ■ Streaming Audio ■ mp3, AAC, Speex, and Nellymoser ■ Streaming Video ■ FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 109. Supported Flash Media Types ■ Streaming Audio ■ mp3, AAC, Speex, and Nellymoser ■ Streaming Video ■ FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP ■ Progressive Audio ■ mp3©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 110. Supported Flash Media Types ■ Streaming Audio ■ Progressive Video ■ mp3, AAC, Speex, and ■ FLV, F4V, MP4, MP4V-ES, M4V, Nellymoser 3GPP, 3GPP2, QuickTime ■ Streaming Video ■ FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP ■ Progressive Audio ■ mp3©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 111. Supported Flash Media Types ■ Streaming Audio ■ Progressive Video ■ mp3, AAC, Speex, and ■ FLV, F4V, MP4, MP4V-ES, M4V, Nellymoser 3GPP, 3GPP2, QuickTime ■ Streaming Video ■ Images ■ FLV, F4V, MP4, MPEG-4: MP4, ■ PNG, GIF, or JPG M4V, F4V, 3GPP ■ Progressive Audio ■ mp3©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 112. Supported Flash Media Types ■ Streaming Audio ■ Progressive Video ■ mp3, AAC, Speex, and ■ FLV, F4V, MP4, MP4V-ES, M4V, Nellymoser 3GPP, 3GPP2, QuickTime ■ Streaming Video ■ Images ■ FLV, F4V, MP4, MPEG-4: MP4, ■ PNG, GIF, or JPG M4V, F4V, 3GPP ■ SWF files ■ Progressive Audio ■ mp3©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  • 113. OSMF Optimizes Video Delivery On Its Own©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
  • 114. Disabling Stage Video in OSMF©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  • 115. Disabling Stage Video in OSMF ■ OSMFSettings.enableStageVideo = false;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  • 116. Disabling Stage Video in OSMF ■ OSMFSettings.enableStageVideo = false; ■ OSMFSettings.enableStageVideo = true;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  • 117. Start Using OSMF©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
  • 118. Start Using OSMF ■ Go to osmf.org & Download OSMF.swc©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
  • 119. Start Using OSMF ■ Go to osmf.org & Download OSMF.swc ■ Copy OSMF.swc to ■ For Flash Pro ■ In Windows: ■ Program FilesAdobeAdobe Flash CS5CommonConfigurationActionScript 3.0libs ■ On Mac: ■ /Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0/libs ■ For Flash Builder ■ place in project ‘libs’©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
  • 120. OSMF is Only Code No Design or GUI©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54
  • 121. OSMF is Only Code No Design or GUI What if I Need an Actual Video Player?©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54
  • 122. Strobe Media Playback http://osmf.org/strobe_mediaplayback.html©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55
  • 123. Start Using Strobe Media Playback ■ Download Strobe ■ Run setup.html©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
  • 124. That’s Still Too Much©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
  • 125. Flash Media Playback ■ Adobe-hosted Version ■ Use FMP Configurator of Strobe ■ http://osmf.org/configurator/fmp/ ■ http://adobe.com/products/ flashmediaplayback/©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
  • 126. Stage Video in SMP & FMP SMP & FMP Exploit Stage Video Automatically©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59
  • 127. AS3 API©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
  • 128. StageVideo Replaces the Video Class©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61
  • 129. ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
  • 130. myVideo.attachNetStream ( ns ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
  • 131. myVideo.attachNetStream ( ns ) ; myStageVideo.attachNetStream ( ns ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
  • 132. StageVideo Does NOT Behave the Same as Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
  • 133. StageVideo Objects You Don’t Create StageVideo Objects©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
  • 134. StageVideo Objects You Don’t Create StageVideo Objects FP Creates Them for You©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
  • 135. StageVideo Objects You Don’t Create StageVideo Objects FP Creates Them for You If it Can©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
  • 136. StageVideo Objects Number of StageVideo Objects Varies©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  • 137. StageVideo Objects Number of StageVideo Objects Varies Upto 8 on Desktop©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  • 138. StageVideo Objects Number of StageVideo Objects Varies Upto 8 on Desktop 1 on Mobile©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  • 139. StageVideo Objects Number of StageVideo Objects Varies Upto 8 on Desktop 1 on Mobile 0 if Unavailable©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  • 140. StageVideo Objects ALWAYS Include a Video Object as Backup©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66
  • 141. StageVideo Objects ALWAYS Include a Video Object as Backup in Case StageVideo is Unavailable!©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66
  • 142. StageVideo Objects StageVideo is NOT a DisplayObject©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  • 143. StageVideo Objects StageVideo is NOT a DisplayObject no addChild()©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  • 144. stageVideos Vector ■ StageVideo objects stored in a vector©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 145. stageVideos Vector ■ StageVideo objects stored in a vector ■ stage.stageVideos©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 146. stageVideos Vector ■ StageVideo objects stored in a vector ■ stage.stageVideos ■ stage.stageVideos.length Tells You How Many StageVideo Instances Will be Supported©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 147. stageVideos Vector ■ StageVideo objects stored in a vector ■ stage.stageVideos ■ stage.stageVideos.length Tells You How Many StageVideo Instances Will be Supported availStageVideos:Vector.<StageVideo> = stage.stageVideos ; if (availStageVideos.length > 0 ) stageVid:StageVideo = stage.stageVideos [ 0 ] ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 148. StageVideo Availability ■ StageVideo objects can Appear and Disappear©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 149. StageVideo Availability ■ StageVideo objects can Appear and Disappear ■ E.g., StageVideo Unavailable at Start, but User Enters FullScreen Mode and StageVideo Becomes Available©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 150. StageVideo Availability ■ StageVideo objects can Appear and Disappear ■ E.g., StageVideo Unavailable at Start, but User Enters FullScreen Mode and StageVideo Becomes Available ■ Thus, Listen for Changes in StageVideo Availability©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 151. StageVideo Availability ■ StageVideo objects can Appear and Disappear ■ E.g., StageVideo Unavailable at Start, but User Enters FullScreen Mode and StageVideo Becomes Available ■ Thus, Listen for Changes in StageVideo Availability ■ StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 152. StageVideo Availability ■ StageVideo objects can Appear and Disappear ■ E.g., StageVideo Unavailable at Start, but User Enters FullScreen Mode and StageVideo Becomes Available ■ Thus, Listen for Changes in StageVideo Availability ■ StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY stage.addEventListener(StageVideoAvailabilityEvent.STA GE_VIDEO_AVAILABILITY, onStageVideoState);©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 153. StageVideoAvailabilityEvent ■ Dispatched When...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 154. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 155. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added ■ StageVideo Availability Changes©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 156. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added ■ StageVideo Availability Changes ■ Use ‘availability’ Property, Which Can Be©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 157. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added ■ StageVideo Availability Changes ■ Use ‘availability’ Property, Which Can Be ■ StageVideoAvailability.AVAILABLE©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 158. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added ■ StageVideo Availability Changes ■ Use ‘availability’ Property, Which Can Be ■ StageVideoAvailability.AVAILABLE ■ StageVideoAvailability.UNAVAILABLE©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 159. StageVideoAvailabilityEvent ■ Dispatched When... ■ Listener Added ■ StageVideo Availability Changes ■ Use ‘availability’ Property, Which Can Be ■ StageVideoAvailability.AVAILABLE ■ StageVideoAvailability.UNAVAILABLE onStageVideoState(e:StageVideoAvailabilityEvent):void { if (e.availability == StageVideoAvailability.AVAILABLE) //stage video is available -- can use StageVideo else //stage video is unavailable -- use Video object }©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
  • 160. Playing Video To See Your Video, Attach the NetStream to the StageVideo stageVid.attachNetStream ( ns ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 71
  • 161. Playing Video Control Video Playback via NetStream ns.play ( ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 72
  • 162. Putting it all Together Simple Demo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73
  • 163. Controlling Size & Position ■ viewport:Rectangle ■ The Visible Surface of the StageVideo Instance ■ A Rectangle Object ( x , y , width , height ) Must be Specified©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 74
  • 164. Controlling Size & Position ■ viewport:Rectangle ■ The Visible Surface of the StageVideo Instance ■ A Rectangle Object ( x , y , width , height ) Must be Specified stageVid.viewPort = new Rectangle ( 0 , 0 , 320 , 240 );©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 74
  • 165. Render State©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75
  • 166. Render State ■ StageVideoEvent.RENDER_STATE Dispatched When a NetStream is Attached to the StageVideo object©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75
  • 167. Render State ■ StageVideoEvent.RENDER_STATE Dispatched When a NetStream is Attached to the StageVideo object stage.addEventListener(StageVideoEvent.RENDER_S TATE, onStateChange);©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75
  • 168. Accurate Sizing©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  • 169. Accurate Sizing ■ videoHeight:int ■ Native Video Height; Read-Only©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  • 170. Accurate Sizing ■ videoHeight:int ■ Native Video Height; Read-Only ■ videoWidth:int ■ Native Video Width; Read-Only©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  • 171. Accurate Sizing ■ videoHeight:int ■ Native Video Height; Read-Only ■ videoWidth:int ■ Native Video Width; Read-Only trace ( “Stage Video Dimensions: “ + stageVid.videoWidth + “ x “ + stageVid.videoHeight ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  • 172. Accurate Sizing ■ videoHeight:int ■ Native Video Height; Read-Only ■ videoWidth:int ■ Native Video Width; Read-Only trace ( “Stage Video Dimensions: “ + stageVid.videoWidth + “ x “ + stageVid.videoHeight ) ; stageVid.viewPort = new Rectangle ( 0 , 0 , stageVid.videoWidth , stageVid.videoHeight ) ;©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  • 173. Rendering Method ■ StageVideoEvent.status Tells How Frames are Decoded ■ VideoStatus.SOFTWARE ■ Indicates hardware-accelerated (GPU) video decoding ■ VideoStatus.ACCELERATED ■ Indicates software video decoding ■ VideoStatus.UNAVAILABLE ■ Video decoding is not supported©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 77
  • 174. Rendering Method ■ StageVideoEvent.status Tells How Frames are Decoded ■ VideoStatus.SOFTWARE ■ Indicates hardware-accelerated (GPU) video decoding ■ VideoStatus.ACCELERATED ■ Indicates software video decoding ■ VideoStatus.UNAVAILABLE ■ Video decoding is not supported myTextField.appendText ( "StageVideo is rendering with " + evt.status );©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 77
  • 175. Zooming StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
  • 176. Zooming StageVideo ■ zoom:Point©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
  • 177. Zooming StageVideo ■ zoom:Point ■ A point, specifying an x (horizontal) and y (vertical) zoom factor, with values between 1 (no zoom) and 16 (16x zoom)©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
  • 178. Zooming StageVideo ■ zoom:Point ■ A point, specifying an x (horizontal) and y (vertical) zoom factor, with values between 1 (no zoom) and 16 (16x zoom) stageVid.zoom = new Point (8,8);©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
  • 179. Panning Zoomed StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 79
  • 180. Panning Zoomed StageVideo ■ pan:Point©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 79
  • 181. Panning Zoomed StageVideo ■ pan:Point ■ A point, with x and y pan values between -1 (left/up) and 1 (down/right), with default of 0 (center) that determines pan positioning of zoomed video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 79
  • 182. Panning Zoomed StageVideo ■ pan:Point ■ A point, with x and y pan values between -1 (left/up) and 1 (down/right), with default of 0 (center) that determines pan positioning of zoomed video stageVid.pan = new Point (1,1);©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 79
  • 183. More StageVideo Properties©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 184. More StageVideo Properties ■ depth:int©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 185. More StageVideo Properties ■ depth:int ■ The z-depth of the StageVideo object, for z-ordering among multiple StageVideo objects©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 186. More StageVideo Properties ■ depth:int ■ The z-depth of the StageVideo object, for z-ordering among multiple StageVideo objects ■ colorSpaces:Vector.<String>©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 187. More StageVideo Properties ■ depth:int ■ The z-depth of the StageVideo object, for z-ordering among multiple StageVideo objects ■ colorSpaces:Vector.<String> ■ A vector list of the color spaces available on the playback device©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 188. Putting it all Together More Complex Demo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 81
  • 189. This Talk in 10 Seconds...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 190. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 191. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 192. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 193. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience:©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 194. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience: ■ Use StageVideo©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 195. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience: ■ Use StageVideo ■ & H.264 Video©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 196. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience: ■ Use StageVideo ■ & H.264 Video ■ Under the Hood...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 197. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience: ■ Use StageVideo ■ & H.264 Video ■ Under the Hood... ■ Use the new AS3 APIs©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 198. This Talk in 10 Seconds... ■ Play Outstanding, Pixel-Drenched Video ■ In Flash Player ■ On Every Device ■ To Optimize the Experience: ■ Use StageVideo ■ & H.264 Video ■ Under the Hood... ■ Use the new AS3 APIs ■ or use OSMF or Strobe to forget about the code!©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 199. Please Fill Out the Scorecard©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 83
  • 200. Thank YouPersonal Blog | http://rblank.comOnline Training | http://richmediainstitute.com