h5播放器-生命周期-创建

2016-08-18 10:14:00   0  举报





仅支持查看

H5播放器的生命周期包括创建、初始化、播放、暂停、停止和销毁等阶段。其中，创建阶段是播放器实例化的过程，包括设置播放器参数、加载资源等；初始化阶段是播放器准备就绪的过程，包括设置监听器、绑定事件等；播放阶段是播放器开始播放视频的过程，包括设置播放位置、控制播放进度等；暂停阶段是播放器停止播放视频的过程，包括保存当前状态、等待用户操作等；停止阶段是播放器完全停止播放视频的过程，包括释放资源、清除计时器等；销毁阶段是播放器被卸载或关闭的过程，包括清理内存、解除绑定等。

作者其他创作

大纲/内容

3：实例化子组件

new Player()

1：合并配置项

// base/component.js_pro._init = function(_config){ this._name = this.constructor.NAME; this._container = _componentContainer.getInstance(); this._initComponetNode(_config); // 1 return this; }

4：注册组件实例

1：初始化子组件节点

2：注册该观察者实例（监听）

实例化：调用原型对象上的_init方法

// component/xxxComponent.jsvar Component = _base.C();Component.NAME = 'xxxComponent';var _pro = Component.extend(_baseComponent);_pro._init = function (_config) { this.__super(_config); // 1 ...}_pro._getTpl = function(){ return _tpl; }_pro.listNotificationInterests = function () { return [ _notificationDefine.MOVIEDATA_READY ];}// TODO_pro.handleNotification = function (_notificationIns) { var _data = _notificationIns.getBody() this.__super(_notificationIns); switch (_notificationIns.getName()) { case _notificationDefine.MOVIEDATA_READY: this._handleMoviedataReady(_data); break; }}

1：调用父组件的_init方法，context为子组件

1：创建一个观察者实例

// base/component.js_pro._initComponetNode = function(_config){ ... if (this._getTpl()) { _config.rootNode.appendChild(_element._$html2node(this._getTpl())); };}

为了方便理解，我改变及缩减了部分源码内容，但整体逻辑和流程是一致的

2：将播放器DOM注入父节点