主页 » RIA文档中心 » Flash

[ADC文章]Flash Player 10.1在移动设备上的视频应用

Posted 五月 6th, 2010 by migsr

这是一篇来自Adobe开发者中心的文章，由RIAMeeting翻译小组呆兔翻译，原文地址是：

http://www.adobe.com/devnet/devices/articles/delivering_video_fp10.1.html

通过提供丰富互联网应用的视频发布经验，Adobe Flash已经为我们提供了可以在网络上处理富媒体内容革命性的沟通方式。现在75%以上的在线视频都依赖于flash技术。Adobe公司正筹划把Adobe Flash Player 10.1应用到移动设备上，通过采取文中推荐的方法，您可以确保所有出色的内容能够跨设备传输给用户。人们已经在思考利用Adobe Flash平台来部署移动视频服务，您应该考虑以下可以提供优秀用户体验的几个因素:

  • 移动视频编码参考: 什么是针对应用Flash Player 10.1的设备的推荐编码文件？本文提供了一个关键编码配置文件设置的总结表单
  • 视频内容优化: 怎样在遵循视频创造内容的情况下找到最好的优化性能的方法？本文提供了在限制环境下达到最优性能应遵循的必要原则技巧
  • 视频播放器的优化:什么才是在您开发视频播放器时来遵循以达到优化性能的最好方法。本文介绍了各种检测方法来确定为视频播放器选择适当的视频流，以达到最佳性能的设计技巧。

根据在市面上应用的硬件功能以及参考设备的内部结构调研， Adobe 在表1中提供了编码参数。

表 1. Adobe为以视频为目标的移动设备提供的编码参数
Adobe-recommended encoding parameters for video targeting mobile devices

如果您目前的视频服务基于表1所提供的编码介绍，您或许无需重新编码。但是，如果您考虑重新编码，Adobe推荐使用硬件加速编码器，例如H.264，有更好的压缩效率进而提高帧速率以及减少电池消耗。

一般情况下,对于源视频的帧速率大于24帧/秒的情况，我们建议维持在源帧速率 （捕捉时的）以保证视频质量。然而,您或许考虑将采样的帧速率降低为原来的偶数倍，例如2倍—举个例子, 从30帧/秒降至15帧/秒.

尽管上文推荐使用24帧/秒, 我们同时也看到30帧/秒的视频帧速率表现良好, 只要能够遵守保守的编码设置（如按照表1中的每项WiFi - On2/Sorenson比特率和分辨率）以及视频播放器的优化规则能够执行。

在多个编码流中重编码以提供一个跨越不同网络条件下最佳的用户体验，至少，Adobe建议您应用上文描述过的三种码流（同上，表 1中的项）

  • 高质量, 高于WiFi, 例如"WiFi – H.264"的配置在 500 kb/秒
  • 中等质量, 高于3G, 例如"3G – All"的配置在 350 kb/秒
  • 低等质量, 高于2.5G, 例如"2.5G – All"的配置在350 kb/秒

视频内容优化

为了提高性能, Adobe建议避免或减少对视频进行如下操作:

  • 将视频旋转,倾斜 以及进行投影透视操作
  • 进行位图缓存
  • 应用滤镜，如倒角，发光之类
  • 通过 BitmapData进行访问
  • 有透明alpha (_alpha) 或 颜色转换
  • 通过Pixel Bender进行转换
  • 与矢量图形混合,包含其它视频, 在之上 (覆盖) 或在后面(衬底)
  • 被放置在半像素边界上
  • 被放置成以窗口模式的(但是其中的HTML嵌入参数wmode并未设置为“窗口”) SWF文件
  • 使用（Scale-9 grid）九宫格

视频播放器优化

除了优化视频内容之外, 视频播放器的优化同样非常重要. 以下部分提供了您在开发和设计视频播放器时应注意的的几个方面.

检查例程

鉴于日益多样化的设备加工，至关重要的是采用更为先进的方法来确定一个给定设备的具体功能，然后相应提供合适的用户界面和视频流。 此信息很重要， 因为用户的设备可能已经改变了CPU能力, 内存, 和输入技术,最关键的因素是要确保您的访问者能有最好的体验。根据和gskinner.com这样一个Flash 开发公司的联合研究，Adobe建议开发人员使用不同的级别检测和给予适当的权重分配：Flash Player检测，网络带宽检测，设备检测，以及输入和屏幕方向检测。

检测flash播放器和版本信息

通过利用第三方，开源的SWFObject，麻省理工学院授权的JavaScript库这种行业标准机制来确定设备上的Flash 播放器的存在和版本。SWFObject 是一个很小的JavaScript 文件，检测的时候只需执行一行JavaScript 代码。您可以点击SWFObject documentation下载被Google Code收录的库文档来学习更多有关于 SWFObject 的应用。

检测网络带宽

遗憾的是, 目前Flash播放器还没有本地机制来检测网络带宽情况— 一个数据关键点以决定什么样的内容更适合您的目标设备。您可以通过测量下载所需的资源所花费的时间来得到网络带宽的最为接近的近似值，如XML 配置文件或其它的SWF 文件，至少50 KB 大小：

  1. //获取字节总数详情
  2. //加载的资源, 并转化字节为kb/秒。 
  3. //获取被分发的带宽
  4. //用已经加载的资源信息量除以总计需要加载的时间总量
  5. var kbps:Number = ((loaderInfo.bytesTotal*8)/1024) / (totalTimeInMilliseconds/1000);

谨记这是一个近似值，它会基于网络加载，设备后台进程，和现有信号强度发生改变。

如果您想使用的Adobe Flash媒体服务器（FMS）来交付应用视频流，它有内置的质量服务APIs可以返回用户当前的带宽，如想获得更多信息，请阅读Adobe Flash 媒体服务器开发向导中的 基于脚本的带宽检测 一文。

检测 CPU架构

在手机领域中, 大部分设备依赖于速度较慢，但能源高消耗的处理器, 像那些基于ARM 的。虽然不是最强大的机制，衡量一个设备是非桌面设备的重要指标就是执行处理器类型检查：

  1. if (Capabilities.cpuArchitecture == 'ARM') {
  2.    //定向!
  3.    用户是最有可能使用移动设备或上网本。
  4. }

检测操作系统(OS)

另一个帮助衡量该设备是移动设备的经验标准是操作系统，尤其是检测一个操作系统并不适用于桌面电脑:

  1. if (Capabilities.os.indexOf('WEB') != -1) {
  2.  
  3.    //Palm 操作系统
  4.  
  5. } else if (Capabilities.os.indexOf('WINCE') != -1) {
  6.  
  7.    //Windows Mobile
  8.  
  9. } else if (Capabilities.version.indexOf('AND') != -1) {
  10.  
  11.    //** Linux操作系统
  12.  
  13. }

检测设备的具体信息

您还可以从用户代理（UA）的字符串中发现更多的granular设备信息，可以通过ExternalInterface 回调 JavaScript。虽然这可能泄露各种设备的具体信息，包括操作系统版本，设备名称，以及浏览器—并不推荐使用这种方法, 因为它针对的是一种特定的设备，不能提供给你的网站在尽可能广泛的范围。此外，UA字符串本身不能保证兼容，在跨平台和运营时也不能良好运行。

检测屏幕分辨率，每英寸点数（dpi），和对角

一种实用的区分移动和非移动设备的途径是设备的Capabilities.screenResolutionX, Capabilities.screenResolutionY,以及Capabilities.screenDPI来确定设备的物理屏幕尺寸。另外请注意移动设备通常比一个典型的台式电脑有更高的DPI：

  1. //使用所有这些属性的组合，您就可以准确的测量设备的物理屏幕尺寸（或对角线）。
  2.  
  3. var dpi:Number = Capabilities.screenDPI;
  4.  
  5. var screenX:Number = Capabilities.screenResolutionX;
  6.  
  7. var screenY:Number = Capabilities.screenResolutionY;
  8.  
  9. var screenDiagonal:Number = Math.sqrt(((screenX*screenX)+(screenY*screenY))) / dpi;
  10.  
  11. //然后使用这个结果，您可以推测一个屏幕对角线小于6设备是移动设备
  12.  
  13. if (screenDiagonal < 6) {
  14.  
  15.    trace("Device is mobile.");
  16.  
  17. }

检测屏幕方向

当设备旋转时，Flash Player将从舞台（stage）调用重置尺寸事件（resize events）调整大小事件，这可能会影响您的UI显示情况。（以下为脚本）

stage.addEventListener(Event.RESIZE, handleStageResize, false, 0,true);

通过此处理程序您可以确定该设备是水平的还是垂直的:

  1. protected function handleStageResize(event:Event) {   
  2.  
  3.    var currentOrientation:Number = stage.stageWidth /
  4.  
  5.    stage.stageHeight;      
  6.  
  7.    if ( currentOrientation <= 1 ) {
  8.  
  9.       trace("portrait");
  10.  
  11.    } else {
  12.  
  13.       trace("landscape");
  14.  
  15.    }
  16.  
  17. }

检测输入能力

各种设备将有不同的输入功能，这对用户体验有直接影响。例如,一个支持滚动交互的UI并不适用于多点触控设备或不支持鼠标的设备。了解这些功能使您能够定制的用户界面，以获得最佳用户交互的输入机制：

  1. //**检测鼠标支持
  2.  
  3. if (Mouse.supportsCursor == true) {
  4.  
  5.    //用户有鼠标
  6.  
  7. }
  8.  
  9. //**检测多点触控
  10.  
  11. //我们可以看到，如果用户有一个触摸屏:
  12.  
  13. if (Capabilities.touchscreenType == TouchscreenType.FINGER){
  14.  
  15.    //设备是触摸屏
  16.  
  17. } else if (Capabilities.touchscreenType == TouchscreenType.STYLUS) {
  18.  
  19.    //屏幕采用了手写笔
  20.  
  21. } else if(Capabilities.touchscreenType == TouchscreenType.NONE) {
  22.  
  23.    //没有触摸屏
  24.  
  25. }
  26.  
  27. //现在我们可以看到，如果我们有手势支持，您将可以预期什么类型的手势。
  28.  
  29. if (Multitouch.supportsGestureEvents) {
  30.  
  31.    trace(Multitouch.supportedGestures.join(', '));
  32.  
  33.    trace(Multitouch.inputMode); // 将是以下三种中的一个:MultitouchInputMode.GESTURE, MultitouchInputMode.NONE, MultitouchInputMode.TOUCH_POINT
  34.  
  35.    //只要我们有手势，就可以对手势进行监听（对于那些支持手势的设备）   stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, handleTwoFingerTap, false, 0, true);
  36.  
  37. }

视频流的选择

基于上述的Flash Player，带宽，设备类型，以及输入检测程序，合适的用户界面和视频流可以提供给用户。

一般来说,如果上述的检测方法提供了一种高可信度的分析说明请求的设备是一个移动设备，默认为一个低质量的视频流—例如，在之前的手机视频编码向导 部分描述的"3G – All"配置—进一步确保播放与一个可以接受的加载时间和帧频同时发生。您可以考虑通过视频播放器控制栏明确为用户提供一个播放高品质视频的选项。

性能优化

低效的视频播放器通常都源于脚本执行过度和过量的额外视频渲染。下面描述了一些优化视频播放器的方法，可能有助于大大改善移动设备的性能。

简化复杂的渲染

尽可能减少舞台上对象的数目。简化所使用的基础按钮的形状， 例如，非复杂的填充风格如简单矩形和纯色形状，而不是渐变或多条线段, 如果是形状，如播放头正在改变形状或位置，应该尽可能经常更新-不超过每秒一次。

定时器功能和限制使用重复检查

目标是尽量减少ActionScript的加工时间, enterFrame处理程序, NetStream注册回调函数, 鼠标事件处理程序，以及其他类似的功能。当注册一个计时器函数, 根据请求速率它会被尽可能频繁的调用，潜在的可能是，Flash Player最终把它所有的时间花费在执行脚本而不是绘制视频帧。因此，视频帧为配合音频将被丢弃，只有视频帧一小部分被渲染。这对于那些为更新UI组件继而触发重绘功能的定时器函数真的是代价昂贵的选择。

摧毁不需要的对象

Flash Player会渲染那些隐藏在其它对象后面的对象。像“旋转沙漏”这样的对象应该在不需要时摧毁删除。对于您打算重用的对象，将时间轴停止并将可见属性设为false，或将其移出舞台。对于您不打算重用的对象，调用removeChild()并且将对象设为null。

尽量减少为经常改变的对象启用位图缓存

避免使用位图缓存(通过cacheAsBitmap属性) 频繁更新对象. 当启用位图缓存, 位图需要重新缓存, 这是一个昂贵的操作, 每次都需要更新对象. 例如, 不应该对经常更新的文本字段使用位图文本消除锯齿选项，因为这会影响视频播放时间。

避免使用透明度

如果可能，避免将物体的透明度限制在较小的区域，例如，它最好是转换成透明覆盖的广告形式，在上面出现或者推出-滚动的广告形式。

避免使用绘图API

绘图API的调用特别昂贵，因为它们通常会创建对象, 如滚动条，在通过光栅渲染他们之前动态加载到舞台上。此外，每次脚本动作执行的时候这些对象都被销毁并重新创建。如果可能的话，在创作时将这些对象静态的创建在舞台上，这些对象通过不同的时间轴驻留在内存中。

提高ActionScript效率

计算机科学编码优化适用于ActionScript ；常见的技术，如避免大循环，减少了函数调用的深度，并简化了面向对象的类的设计，应用。Adobe 使用现有的最佳实践来提高ActionScript的表现:

请同时参阅 为 Adobe Flash 平台优化移动内容 来获得更多的ActionScript 3 优化性能的提示。

下一步去哪里

Flash Player 10.1将Flash播放器引入移动设备，现在授权你为客户提供他所钟情的另一个平台所具备的视频体验。您可以充分利用众多已存在的针对Flash Player的项目中的资源，但我希望通过这篇文章，已经能在移动手机的限制环境中带给您好的观赏性，经过必要的优化创建有吸引力的用户体验。

虽然这篇文章是解决优化性能的相关问题，我强烈建议您也着眼于另一个重要的方面:体验设计。手机是一个吸引用户参与的引人注目的平台，充分利用移动内容开发用户定制体验是一种至关重要且有意义的方式。参考以下资源来获得更多信息:

  1. 了解更多有关Flash Player 10.1的知识并尝试桌面测试版
  2. 观看 Flash Player 10.1演示 以及Flash Player 工程师讨论关于把整个Flash播放器应用到移动设备中重要的新特性和面临的一些挑战。
  3. 参考 ActionScript 3 开发指南 和 Adobe Flash 平台的 ActionScript 3 参考 的信息来获得语法介绍和Flash Player 10.1的新APIs的使用方法

学习如何在移动设备上定制您的内容并尽可能获得最佳的用户体验。看看下面的新的文件草案:

关于作者

埃德蒙.金Adobe Flash Player系统的一名产品经理, 在那里他致力于使丰富的视频体验应用到移动设备上的平台开发， 加入 Adobe之前,他在IBM 全球服务中心以一名IT顾问的身份开发web应用。埃德蒙拥有南加州大学计算机科学的学士学位，以及哈斯商学院在加州大学伯克利分校的工商管理硕士学位。当不工作时，爱德蒙喜欢带着移动设备探索和拍摄旧金山照片，偶尔骑山地自行车和国际徒步旅行。下面是他的Twitter：@edmondau.。

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-224-1-1.html
您给予的分值: None 平均分: 8.8 ( 5 票)
周五, 2010-05-14 14:14 — RIAMeeting网友

学习了

学习了

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题