e-ngx-xgplayer v5.0.1
e-ngx-xgplayer
基于Angular的西瓜播放器。
Usage
Install
npm install --save e-ngx-xgplayer@latest
Add the ENgxXGPlayerModule
import { ENgxXGPlayerModule } from "e-ngx-xgplayer"; @NgModule({ imports: [ ENgxXGPlayerModule ] })
Use in Template
<e-ngx-xgplayer [options]="playerOpts" (ready)="ready($event)" (destroy)="destroy($event)" (complete)="complete($event)"> </e-ngx-xgplayer>
Use in Component
playerOpts: any; constructor() { this.playerOpts = { url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4' }; } ready(evt: ENgxXGPlayerComponent) { console.log(evt); } complete(evt: ENgxXGPlayerComponent) { console.log(evt); } destroy(evt: any) { console.log(evt); }
API
Inputs
options
(any
) - 播放器配置,与西瓜播放器配置一致(注意:el
配置项无需再手动配置,组件内部自动获取)plugins
({name: string, handler: Function}[]
) - 自定义插件。name: 插件名称,handler:处理函数(插件逻辑)。参考西瓜播放器自定义插件
Outputs
ready
- 实例化完成事件,此时不可以调用 ENgxXGPlayerComponent 实例与视频交互的相关方法,因为 video 还没生成。参数 $event 为当前 ENgxXGPlayerComponent 实例对象。参考西瓜播放器实例化完成事件complete
- 视频生成结束事件。参数 $event 为当前 ENgxXGPlayerComponent 实例对象,此时才可以调用 ENgxXGPlayerComponent 实例与视频交互的相关方法。参考西瓜播放器视频生成结束事件
Instance Method
参考西瓜播放器方法
start(url: string): void
- 启动播放器play(): void
- 播放视频replay(): void
- 播放器重播视频pause(): void
- 暂停视频reload(): void
- 重新加载视频canPlayType(mimeType: string): boolean
- 检测您的浏览器是否能播放不同类型的视频,mimeType:检测的类型getBufferedRange(): any
- 返回当前的缓冲片段时间范围,[start,end]:start 表示缓冲起始时间,end 表示缓存截止时间
Develop
```bash
npm install // 安装依赖包
npm start // 启动项目
```