Delivering The Best Flash HD Video with Stage Video and OSMF

5,974 views

Published on

Written for FITC Toronto 2011, by R Blank

Video in Flash just keeps getting better and better. Now, with Flash Player 10.2, you can deliver higher quality HD video to a much wider audience.

Using the new Stage Video feature, you can deliver the best possible viewing experience, of the highest quality video content -- while reducing processor usage by up to 85%!

And, even better, the latest version of the Open Source Media Framework (OSMF, www.osmf.org ), and the OSMF-based Strobe Media Playback, include native support for Stage Video, making it incredibly easy for any user of Flash to start harnessing the amazing playback powers of Stage Video in Flash Player 10.2.

Come join OSMF-guru R Blank as he dives into the new feature of Stage Video, and how best to exploit it in your OSMF projects, from understanding how it works, to optimizing your HD video content for playback.

This talk is for ALL audiences, including designers, developers, and anyone who works with video in Flash. Very little code will be covered.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,974
On SlideShare
0
From Embeds
0
Number of Embeds
640
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

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

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

    ×