移动端HTML5使用原生<video>标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。
以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps左右，文件大小大约500KB；参考QzoneTouch多普勒测速，2g网络的平均速度是14KB/s，那么下载一个低码率视频耗时35s；那么要想流畅播放视频，就需要一个加载等待的过程，这个过程要有明确的反馈，不能让用户有“坏掉了”的感觉。
| # | dns(s) | conn(s) | rtt(s) | tran(kb/s) |
|---|---|---|---|---|
| 2g | 3.85785 | 2.33482 | 2.57478 | 14.0374 |
| 3g | 1.60643 | 0.743109 | 0.608047 | 60.1967 |
| wifi | 0.986921 | 0.550208 | 0.444332 | 70.8728 |
视频是否可以自动播放，是否能循环播放，是否能显示下载进度，播放的时候如何隐藏控制条，暂停的时候又能显示出来呢。这些问题看上去貌似简单，但是由于PC/iOS/Android这些不同平台、不同的浏览器内核、甚至相同内核的不同版本，所实现的<video>属性、方法和事件差异较大，解决兼容性问题又给开发造成了很大困扰。 查看全文
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代，重新定义数据图表的时候到了
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。
混搭的图表会更具表现力也更有趣味，ECharts提供的图表（共9类14种）支持任意混搭：
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、 饼图（环形图）、雷达图、地图、和弦图、力导布局图。 查看全文
HTML5 中新增标签Canvas，Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。利用JS，可以实现一些超炫酷的效果。本文所介绍的是基于Canvas实现的炫酷3D动画大背景。
QQ 官网 http://im.qq.com/pcqq/
http://xuanfengge.com/demo/201411/vector/demo1.html
为方便大家使用，轩枫阁已将主体代码抽出，并示范使用方法（具体看源码），只需加载相关JS并调用即可。不依赖jQery，但是需注意代码执行顺序。
改变3D大背景块颜色，清晰可见，适用于文字较少、加以配图的页面。 查看全文
技术：基于HTML5 canvas
文档：英文（http://www.chartjs.org）、中文（http://www.bootcss.com/p/chart.js）
类型：6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）
量级：独立包，不依赖第三方 JavaScript 库，小于 5KB
大小：Chart.min.js-50.201 kb
特性：颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫
兼容：支持canvas的所有现代浏览器和大部分手机浏览器，自动针对retina屏幕做缩放
其他：图表如果使用动画效果，在PC端流畅，但是在移动端效果产生抖动延迟现象；如果不使用动画效果在移动端则正常显示
推荐指数：★★★★☆ 查看全文