前端性能优化-通用的缓存SDK（视频）

播放器形式

• html5标签 video播放

  • 不需要下载额外资源（优点）
  • 每一个浏览器外观不一样，需要自己来写UI实现（缺点）

• flash

  • 兼容性好，只要有flash player播放器插件，都可以进行播放
  • 需要下.swf辅助插件（flash player）
  • flash player版本的碎片化
  • ui定制需要写as

解决方案

• flash和HTML5相结合，组成一个完整的方案
  • video.js 功能强大，使用复杂
  • flowplayer功能简洁，使用方便

视频优化解决问题

- 设计师要求按照设计图做播放器
- 老板要求我们进来就可以看到视频

自定义播放器

• 使用css画一个播放器UI
• 播放器事件
• UI和播放器事件联系起来

想让视频第一事件加载出来

• 目标：缩短从用户进入页面到播放视频第一帧时间
  • 把初始化的播放器代码的执行顺序提前
  • 把播放器播放时所需资源提前

延迟的：

Paste_Image.png

图片太大阻塞加载

Paste_Image.png

视频资源提前

• 浏览器会默认把多媒体资源扔到后面，即使初始化的位置再最前面

依然不理想

Paste_Image.png

解决办法，让他以 样式表的形式加载进来

Paste_Image.png

Paste_Image.png

以来的文件第一时间加载进来

Paste_Image.png

如果想更快怎么办？请看后面缓存sdk章节