标准（精简，兼容）调用方式-自动判断平台选择调用Flashplayer还是H5-video-ckplayer
帮助手册&安装调用&播放器调用方式
标准（精简，兼容）调用方式-自动判断平台选择调用Flashplayer还是H5-video
在查阅该文之前需要了解的内容如下：
该调用方式为常用调用方式，并且是一种比较简单的调用方式，功能方面只保持播放一个普通视频，兼容PC端和移动端。视频格式推荐使用mp4，因为此格式可以兼容大部分的平台（浏览器）。代码如下：&div&id=&a1&&&/div&
&script&type=&text/javascript&&src=&ckplayer/ckplayer.js&&charset=&utf-8&&&/script&
&script&type=&text/javascript&&
var&flashvars={
&&&&f:'http://movie./flv/other/1_0.mp4',
var&video=['http://movie./flv/other/1_0.mp4-&video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
&/script&代码说明：&div id=&a1&&&/div&播放器所在容器（播放器加载后将显示在id=&a1&的div容器中）。&script type=&text/javascript& src=&ckplayer/ckplayer.js& charset=&utf-8&&&/script&引入ckplayer.js，该文件为主要文件，兼容PC和移动端时必需引入var flashvars={ & &f:'http://movie./flv/other/1_0.mp4', & &c:0 };定义播放器加载（初始化）时要传递的参数，flashvars是一个（对象）变量，该变量主要为PC端的flashplayer所使用。但部分参数也为移动端H5所使用。该变量所有属性的功能及作用请查看本手册中单独的有关该变量的说明（建议了解以下相关内容里有相关链接）。特别说明：f属性仅供pc端使用，如果是多段视频可以用f:'1.flv|2.flv'这样的形式。var video=['http://movie./flv/other/1_0.mp4-&video/mp4'];该变量是一个数组形式。定义了移动端（H5）播放时使用的视频地址，数组结构说明如下：var video=['视频地址-&MIME类型','视频地址-&MIME类型','视频地址-&MIME类型'];为什么要定义多个视频地址呢？因为准确的说不同的平台（浏览器）支持不同的视频格式，所以这里可以定义多个不同格式的视频地址。浏览器在播放时第一个视频连接不上时会自动选择链接下面一个视频，直到能播放为止或全部检查完毕为止。在移动端同时支持使用ajax调用一个网址，再由这个网址里定义视频地址的形式调用。具体的用法请查看本教程里有关于该部分的单独的说明（建议了解以下相关内容里有相关链接）。CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);CKobject是用来调用播放器的函数。里面包含了若干（为了便于理解，我们暂且称其为）子函数。embed是其中的一个函数，该函数的作用是在自动判断平台类型（PC端还是移动端）后调用不同类型的播放器（flashplayer还是h5的video），该函数准确的格式说明如下：CKobject.embed('ckplayer.swf地址[必需]','视频所在容器的ID[必需]','播放器的ID[必需]','宽度[必需，支持具体值以及百分比]','高度[必需，支持具体值以及百分比]]',平台优先选项[false=优先使用flashplayer，true=优先使用h5的video],初始化参数[必需],移动端所使用的地址数组[必需],其它配置[非必需，主要针对flashplayer的配置]);
建议了解以下相关内容：
Powered &&
Copyright&ckplayer，移动版H5项目的兼容性测试初探；本文其实就是，我对于“如何对H5项目的兼容性进行；一、测试流程简介：；(一)测试计划与测试设计阶段：这个阶段主要是对项；计划情况，安排测试计划；根据项目的策划文档，设计；(二)测试执行阶段：主要进行：功能测试、回归测试；试方法是：黑盒测试；(三)测试总结；目前基本就这几个阶段，但是考虑到现在开发节奏比较；二、兼容性测试：；目的
移动版H5项目的兼容性测试初探
本文其实就是，我对于“如何对H5项目的兼容性进行测试”这个问题的探索过程，与大家分享一下。大部分资料都是来自于网络，并通过我自己的验证得出的；还有一小部分是我自己经验总结得出的。可能有不严谨的地方，希望大家能够指正。
一、 测试流程简介：
(一) 测试计划与测试设计阶段：这个阶段主要是对项目文档进行解读，然后根据项目的
计划情况，安排测试计划；根据项目的策划文档，设计相关的测试方案和测试用例。
(二) 测试执行阶段：主要进行：功能测试、回归测试、兼容性测试。功能测试的主要测
试方法是：黑盒测试。根据测试用例，对已经开发完成并通过验收的功能，根据测试计划和测试用例执行功能测试、修改BUG并回归测试、兼容性测试：一般都是在功能测试完成，BUG全部清理完后才进行，主要是为了尽量减少BUG对兼容性测试结果的影响。
(三) 测试总结
目前基本就这几个阶段，但是考虑到现在开发节奏比较快，基本上没有第一阶段，直接进入执行测试阶段，在测试的时候，是边想边测试的。这就导致了会出现测试用例覆盖率不达标的情况。
二、 兼容性测试：
目的：让项目在各种运行环境下，都能有统一的表现。
如果一个项目是在多平台上运行，或者同一平台的不同环境下运行，在功能测试完成之后，都要进行兼容性测试。为的就是：让这个项目能在多个平台上能有如一的表现。
(一) 分析H5项目的运行环境：
根据平台分：android、IOS、wp
1) Android平台下的微信浏览器内核：
1. 微信6.1版以上，会调用内置的浏览器运行（QQ浏览器X5内核，基于Android 5.0 WebView Blink内核，Chrome 37）
PS：在个别机型上有区别，即使是微信6.1，也不会调用微信的浏览器运
行，而是调用系统自带的浏览器运行。典型：华硕ZenFone2，比较特殊
的一点是，这个手机使用了intel的CPU。
判断是否调用微信内置浏览器，可在微信打开网页后，下拉会在屏幕最上
方有提示。
2. 6.1以下版本的微信，会调用系统自带的浏览器内核运行。
Android内嵌的浏览器，又根据系统版本的不同，有所区别：
a) android4.2之前的系统
b) android4.2之后的系统。浏览器内核是有区别的（虽然他们都是基于
WebKit内核的）。
2) IOS平台下的浏览器：由于IOS系统的限制，微信不能使用自家的内核，只能
调用Safari
的内核运行。这里的话，又分为两种情况：
1. IOS8之前
2. IOS8以后包括IOS8（区别就是，IOS8中，苹果推出了新的网页浏览器控
件 WKWebView。详情可取搜索WebKitin IOS8）。鉴于IO8以下设备的占
有率很低，在测试成本和时间面前，我觉得可以忽略掉。
3) 分辨率：影响页面显示
1. Android手机目前主流的分辨率有：20*0、
2. IOS设备目前的主流分辨率有：34*750、、
4) 手机CPU和GPU，这方面对H5项目影响较小，在提高测试效率面前，可以忽
(二) 测试策略：
1) 使用：微信6.1以上、调用微信内置浏览器运行的Android手机测试（小米4）
2) 使用：微信6.1以上、调用手机自带浏览器运行的Android手机测试（华硕）
3) 使用：微信6.1以下、调用手机自带浏览器运行的Android4.1的手机测试（小
4) 使用：微信6.1以下、调用手机自带浏览器运行的Android4.3的手机测试（三
5) 使用：分辨率为16：9、IOS版本是8.0以上的设备测试（iPhone6 Plus）
6) 使用：分辨率为4：3、IOS版本是8.0以上的设备测试（iPadmini2）
综上：完成在这6个设备上的测试，基本可以达到我之前指定的测试标准。
三、手机硬件：这里主要介绍下影响手机兼容性的硬件：CPU和GPU
(一) CPU：这里主要简单介绍下android设备的CPU，由于苹果对CPU数据暴露很少，
所以能查到的资料也不多。
1) 高通：移动处理器的绝对领导者，移动处理器高端市场占有率很高
1. 最高型号：高通骁龙820
2. 代表设备：小米系列、国内各大旗舰设备、三星S7、S7 Edge等
2) 联发科：占据了移动处理器市场的中低端位置。Heliox20世界上首款10核移
动处理器。
1. 最高型号：heliox25（美[hi:li':o?]）
2. 代表设备：魅族MX5、红米系列、国产各种千元机等
3) 海思：华为自主研发CPU，定位高端市场
1. 最高型号：麒麟955
2. 代表设备：华为P系列、荣耀系列、Mate系列。如华为P9(955)
4) 三星猎户座：三星自主研发CPU，主要用于三星S系列旗舰手机、及魅族MX、
MX2、MX3、MX4PRO、PRO5等手机。
1. 最高型号：Exynos 7420
2. 代表设备：三星S2-三星S6，部分note系列手机
1. 最高型号：Atom X7系列（类似于酷睿 I7系列）
2. 代表设备：华硕ZenFone系列，联想K900等。
PS:这个CPU各种兼容性问题啊。。
6) Nvidia的Tegra系列：现在手机上很少见这个系列的CPU了，android平板上
有些会用到。市场占有率很低。
1. 最高型号：Tegra X1
2. 代表设备：Google Nexus9平板
7) 联芯：国内芯片厂，定位低端
1. 最高型号：L1860C
2. 代表设备：红米2A
8) 德州仪器：在2，3年前的手机上出现过，后来不做手机CPU了
1. 代表机型：nexus2
大概总结下：
高通、联发科市场占有率较高，兼容性也比较好。海思是华为自主研发，在华为很多机型上都会用到，偶然一些应用会出现兼容性的问题，兼容性一般。三星猎户座占有率也不低，但是最新的S7系列手机中，三星都放弃使用自家的CPU改用高通了，可见其性能还是和高通有差距。兼容性方面三星CPU还是比较好的。其他：intel、tegra、联芯现在占有率都很低，基本可以忽略了，而且intel CPU的兼容性超级差。
(二) GPU：
1) Adreno：高通自家CPU自带的GPU，性能强大，有高通CPU的地方，就有这
1. 最高型号：Adreno 530
2. 代表设备：小米5
2) PowerVR系列：主要用于苹果设备的GPU，性能强大
1. 最高型号：PowerVR 7XT系列
2. 代表设备：苹果设备
3) Mali系列：ARM推出的GPU，联发科、三星CPU猎户座、海思麒麟等，各种
不能研发GPU的厂商都用这种GPU
1. 最高型号：Mali T880
2. 代表设备：三星S6、华为P9等
4) Nvidia的Tegra系列：显卡大厂Nvidia研发的TegraCPU自带的GPU
1. 最高型号：Tegra X1
2. 代表设备：GoogleNexus 9
大概总结下：
移动设备的GPU基本都与CPU有关联：高通CPU都是用的Adreno，苹果设备全线都是使用PowerVR系列的GPU，德州仪器的CPU，也是使用PowerVR的GPU的。其他剩余的一些CPU厂商，基本都使用的ARM的Mali系列GPU，Nvidia的CPU也是只用他自家的GPU。
GPU方面的兼容性问题都比较少，市场占有率比较高的：Adreno、PowerVR、Mali系列，兼容性基本都没啥大问题。
包含各类专业文献、行业资料、文学作品欣赏、幼儿教育、小学教育、H5项目的兼容性测试初探80等内容。
　H5项目的兼容性测试初探_计算机软件及应用_IT/计算机_专业资料。影响微信端的H5项目的兼容性的因素分析,并根据分析结果制定测试策略还有关于手机硬件相关的分析.... 　用案例浅谈微信传播的H5页面设计_广告/传媒_人文社科...围绕“选择”这个品牌关键词,用引人入胜的测试题让...与本文开头一样也是大众点评的项目,这次是为姜文的... 　浅谈GPS技术在工程测量运用中遇到的问题及解决方法_电力/水利_工程科技_专业资料...之上,离地面的平均高度为 20200km,并且 运行一周期所需的时间大约为 11h58...H5开发者心声：浏览器兼容成最大问题_过谦_新浪博客
H5开发者心声：浏览器兼容成最大问题
　　最近，CSDN和中国产业联盟发起了一个问卷调查，参与调查的开发者们将遇到的问题、关注的事情、对HTML5技术的期待反映在了问卷之上。我们对问卷结果进行了统计和分析，总体来看，
开发者对于浏览器扩展规范能够统一，各大厂商浏览器兼容性能够提升的愿望最为迫切。还有开发者指出，仅仅用PhoneGap作为中间件通过HTML5开发Hybrid
App的例子太多，如何运用HTML5技术的长处更好地做开发值得我们思考。
大部分开发者处在正在学习、刚刚入门和准备学习HTML5技术的阶段，已使用HTML5技术超过1年的开发者仅占20%。
　　2. 目前来看，使用HTML5技术从事Web
App开发的人数最多，占到42%的比重。移动端Web开发的人数相对较少，仅占9%。
HTML5适合开发的应用类型，各方面占比较为平均，其中游戏稍占上风，占到25.7%。此外还有个别开发者提出HTML5技术还能够开发3D操作界面、搜索引擎相关应用、图像处理应用以及新闻类应用。
HTML5开发者在开发过程中遇到的各种困难，最令开发者抓狂的是“缺少中文材料和技术支持”，其次，HTML5规范不完整，浏览器实现不标准、碎片化严重也是令开发者头痛的问题。
HTML5的标准和规范改进层面，各项数据都比较平均，看得出开发者对于各个方面都希望有所改进。其中“语音输入、支付、地图等三方控件的整合调用”占比相对最高，其次是本地文件系统的访问以及前后摄像头的调用。
　　6. 由于接受本次调查的Web开发者居多，加之良好的用户体验与交互性，Chrome
PC版最受青睐，其次是Firefox浏览器。
对于最希望HTML5浏览器进行哪方面改进，大部分开发者选择了希望“各家浏览器的扩展规范能够统一，不要让开发者做大量兼容工作”一项。
　　8. 超过半数的HTML5开发者认为最好的HTML5前端开发框架是jQuery。而Sencha、
YUI、ExtJS、Dojo各自占到5%—10%的比重不等。此外，还有开发者推荐angular、jMelon以及zepto。
　　9. 开发者最希望当前的前端开发框架能够提升对各浏览器的兼容性，以及对不同OS背景的UI兼容性大幅度提升。
　　10. 当前开发者最喜欢的HTML5开发工具，UE/Notepad++、Dreamweaver、Sublime
Text以及Eclipse都平分秋色。值得注意的是，14%的开发者认为“没有一个满意的”，他们分别推荐了Webstorm、、Vim、AptanaStudio3以及基于NimbleKit的Xcode。
　　11. 开发者心目中最佳的HTML5开发工具必须做到什么?“完整的HTML5(包括、)语法高亮、自动补全”的票数最多，呼声最高。完善的模拟器、强大的代码分析能力、真机联调以及Javascript代码重构能力也是开发人员十分期待的。
如果举办HTML5开发者大会，开发人员最希望在大会上听到的内容主要概括为以下几点(其中希望浏览器扩展规范能够统一，各大厂商浏览器兼容性能够提升的愿望最为迫切。)
　　1) 浏览器的兼容问题如何解决?何时推出规范的API?
　　2) HTML5开发工具(框架、IDE)的知识。
　　3) JavaScript性能、模块化的内容。
　　4) 杀手级HTML5游戏/应用技术大牛现场分享。
　　5) 开发者急需交流和学习的平台，迫切需要中文学习资料。
　　6) HTML5在 Hybrid App方向的探讨，如何开发出和Native一样流畅的App?
　　7) PhoneGap相关知识。
　　8) 传感器、摄像头等硬件设备的调用。
　　13. 开发人员在进行HTML5项目过程中曾遇到的困难以及对于HTML5的培训和技术支持的期待，主要为以下几点：
　　1) Javascript代码编写和重构。
　　2) 缺乏中文学习资料，不知该从何入手。
　　3) HTML5+PhoneGap的组合开发Hybrid App遇到了一些问题。
　　4) 调试麻烦，与各类型Android手机(包括低端Android机器)的兼容较差。
　　5) 希望有模拟器(各手机版本都要有，可以类似Flash lite开发工具)，包括自定义性能模式等。
　　6) 浏览器兼容性差。
　　7) CSS的解析较麻烦，缺乏权威的测试机构承担适配任务。
　　8) 本地化应用受制于文件系统，只能使用localstorage等有限的离线存储来实现本地存储功能。
　　9)HTML5开发目前有些盲目，过度神化，当前仅仅用PhoneGap作为中间件通过HTML5开发Hybrid
App的例子太多，大多数时候是用来和Native
App比动画效果、比流畅度，没有真正拿HTML5的长处来做事情，如何利用HTML5的长处在移动互联网环境下做开发是一个非常值得思考的问题。
　　更多精彩知识请访问
博客等级：
博客积分：0
博客访问：3,589
关注人气：0
荣誉徽章：HTML5+flash打造兼容各浏览器的文件上传方案_HTML5教程_前端技术
您的位置： &
& 详细内容
相比flash，采用HTML5的新技术无疑可以提升程序的加载速度。但是在目前的情况看来，HTML5的特性支持度不高，插件的可用性范围确实比较窄。例如，我在插件中使用到的新特性有：
&input type=&file' /&标签的multiple属性
File和FileList API
XMLHttpRequest2的upload和onprogress
　　就拿File来讲，IE9都不支持，所以在当前环境下IE系列浏览器几乎无法使用。因此做一个兼容方案还是有必要的。如何做兼容呢？这不是废话，忘了你的H5版uploadify是怎么来的了？我们可以在不支持这些特性的浏览器上运行flash版的uploadify。
　　锁定目标，我们要做的其实只需三步：
写一个适配器，用来检测客户端浏览器对HTML5的这些特性的支持程度
如果支持，则动态加载HTML5版本的插件所需的js和css文件，调用H5版本的插件
如果不支持，动态加载flash版本的插件所需的js和css文件，调用flash版本的插件
　　我给适配器命名为uploadAdapter，这样一来，我们的文件结构应该变成了这样：
　　其中Huploadify就是我上一篇所写的HTML5版，uploadify为官方的flash版本，原封不动放在这里。为了动态调用js和css文件，我还专门写了一个jquery.loadscript.js，用来动态加载文件。这样所需的东西就全了。
　　因为改为了动态加载文件，页面上需引入的文件只有下面三个：
&script type=&text/javascript& src=&jquery.js&&&/script&
&script type=&text/javascript& src=&jquery.loadscript.js&&&/script&
&script type=&text/javascript& src=&jquery.uploadAdapter.js&&&/script&
　　在调用的时候，我们直接使用uploadAdapter就可以了，其他的工作适配器自动完成了，像这样：
$('#upload').uploadAdapter({
&&&&&&& auto:true,
&&&&&&& buttonText:'选择文件',
&&&&&&& fileObjName:'file',
&&&&&&& fileTypeExts:'*.*.*.exe',
&&&&&&& multi:true,
&&&&&&& formData:{key:123456,key2:'vvvv'},
&&&&&&& fileSizeLimit:9999,
&&&&&&& showUploadedPercent:true,
&&&&&&& showUploadedSize:true,
&&&&&&& removeTimeout:9999999,
&&&&&&& uploader:'upload.php'
　　为了避免使用在项目中的时候出现动态调用的路径错误，在uploadAdapter中还新增了一个配置项：
baseUrl : 'url/uploadAdapter' //指定uploadAdapter的根目录
　　另外，如果你想手工指定想要调用的插件类型，这里也提供了一个配置：
pluginType : 'html5' //手工指定插件类型，字符串，html5或flash
　　下面分别是flash版和HTML5版的截图：
& & & & & & & & & & & flash版
& & & & & & & & & & &HTML5版
　　样式上有一些区别，我这里也懒得修改了。css文件都是独立出来的，可以自行修改样式。
　　源码我依然打为一个完整的包，包含了demo文件。需部署在PHP环境中。
　　猛戳这里下载：
( 14:11:45)
( 14:11:43)
( 14:11:42)
( 14:11:35)
( 14:11:33)
( 14:11:32)
( 14:11:28)
( 14:11:26)
相关排行总榜观察 | 你必须知道的H5加速器九大常识！ | 手游那点事
观察 | 你必须知道的H5加速器九大常识！
日前，Layabox、Cocos2d-JS、Egret均宣布即将联合各大浏览器和APP发布HTML5(简称H5)加速器。困扰H5产业的性能问题终于得到阶段性解决。在大家纷纷谈论时，你最好知道以下常识：
Q：什么是H5加速器？
A：用以提高浏览器或APP中H5项目性能的扩展组件。
Q：H5加速器英文名字?
A：业界通常采用Runtime这个晦涩的专业词语，当然也有例外，比如Layabox，就采用Laya.player命名
Q：H5加速器目的是什么?
A：主要是用于解决H5的兼容性和性能问题
Q：H5加速器是如何启动的？
A：在H5游戏运行时，由浏览器等APP通过内置的插件管理器调用加速器插件，对运行中的游戏启动加速，无需额外安装。
Q：H5加速器为什么能加速？
A：加速的主要方法，一是GPU渲染加速，二是内置c++实现的高级对象来减少js的调用量。
Q：H5通过加速器真的能达到APP的性能？
A：H5和APP，二者在底层对象设计和渲染原理是一样，优化比较好的加速器原则上是可以和APP媲美的，Layabox已经公布了其性能对比视频和测试代码来证明效果。
Q：H5加速器存在哪些问题?
A：1、标准问题，目前存在H5加速器标准不统一，各自为众的问题，H5项目只能调用引擎开发商提供的对应加速器，有一定的约束性。其中Layabox宣称可以为其他项目加速，但效果如何还有待市场检验。
2、普及量问题，目前H5加速器的普及依赖浏览器和APP的支持力度和嵌入速度。还达不到所有场所全面覆盖，但这个问题改善速度很快。
3、苹果IOS问题，目前采用的插件方案只适合安卓，IOS体系下需要采用内置的方案实现，会导致APP尺寸增加以及加速器更新的新问题，需要产业再寻找新的方案。
Q：H5加速器的前世今生？
A：H5加速器目前才进入公众眼界，其实它的历史可以追溯到2000年全球最大的WEB游戏平台可乐吧和Adobe的Flashplayer，特别是可乐吧的FancyBox方案和现在的H5加速器方案几乎一模一样，也是通过js调用FancyBox插件的渲染实现了当时惊艳的页游效果。而Layabox的创始人也是可乐吧的创始人，这可能是Layabox号称加速器性能最优的一个原因，这是一个迟到的故事。
Q：目前已有的H5加速器都有哪些区别？
A：目前国内只有三家H5加速器，Layabox的Laya.player通用加速器支持所有H5项目加速。Cocos2d-JS的runtime加速器支持Cocos2d-JS引擎产品加速，Egret的runtime加速器支持Egret引擎产品加速。国外的H5加速器ludei，支持ludei引擎产品加速。
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
媒体合作、招聘信息投放请联系 Aimee QQ :}