Player Loader - Flash与HTML5播放器统一加载方案

一、架构

背景: 页面中需要使用Flash播放器或HTML5播放器,同时播放器会与页面进行某些交互。已知调用Flash播放器的方法和HTML5播放器的方法不一致,尽量少改动页面前端代码。

设想: 建立一个第三方播放器加载容器文件,通过播放器加载容器文件来加载Flash播放器或HTML5播放器,同时暴露出部分API与页面交互。如下图:

情况如下:

1.1、初次加载,默认Flash 播放器:

① (创建实例,准备加载Flash播放器) -> ②(加载并实例化Flash播放器)-> ③ (成功创建,并触发回调函数)

1.2、Flash播放器切换至HTML5 播放器

  • 如果该浏览器支持HTML5播放器,则:③(准备切换至HTML5播放器) -> ①(检测该浏览器是否支持HTML5播放器,如果支持) -> ④ (成功加载并实例化HTML5播放器)
  • 如果该浏览器不支持HTML5播放器,则:(准备切换至HTML5播放器) -> ①(检测该浏览器是否支持HTML5播放器,如果不支持) -> ② (重新创建Flash播放器)

1.3、HTML5播放器切换至Flash播放器:

⑤(准备切换至Flash播放器) -> ①(准备加载Flash播放器) -> ② (成功加载Flash播放器)

1.4、再次加载时,会根据上次使用播放器类型:

  • 若为Flash播放器,则为: ① -> ②
  • 若为HTML5播放器, 则为: ① -> ④

1.5、外部调用播放器API时,则会根据播放器类型:

  • 若为Flash播放器,则为: ① -> ②
  • 若为HTML5播放器, 则为: ① -> ④

二、实现

2.1、概述

使用单例模式,创建一个名为EmbedPlayer的构造器函数,传入创建播放器所需的参数,根据用户选择实例化Flash播放器或者HTML5播放器,并绑定外部调用API接口函数。

2.2、默认配置项

var config = {
 revision: '',       // 版本号, 用于记录和更新缓存
 defaultType: '',  // 播放器默认类型
 localName: '',    // 播放器LocalStorage Key Name
 typeMap: {},     // 播放器类型枚举
 mapping: {},     //  Feedback 弹窗隐射表
 autoFeedback: {},   // 自动Feedback 弹窗
 options: {},       //  播放器通用参数
 flashvars: {},     // 播放器
 param: {},         // Flash播放器参数
 prefilter: function (options) {}    // 前置过滤函数 
};

2.3、API接口

// Construcor 
EmbedPlayer: function (options) {}

// Portotype Method
done: function () {}        // 成功回调函数
loader: function () {type, callback}      // 切换播放器
reload: function () {callback}      // 重新载入播放器

// Static Method
feedback: function () {}  // 显示播放器反馈面板
loader: function (type, callback) {}       // 切换播放器
reload: function (callback) {}       // 重新载入播放器

2.4、Example

var player = new EmbedPlayer({
   container: document.getElementById('player_container'),
   cid: 110
});

三、存在问题及优化方向

3.1 目前使用单例模式,无法同时创建多个播放器实例,无法在同个页面使用多个播放器。后期可以考虑使用其他设计模式。

3.2 目前使用手动修改 Config.revision来更新版本和缓存,每次修改播放器文件需要同时修改此文件。后期考虑是否可以优化。