支持flv视频播放的h5播放器-xgplayer

支持flv视频播放的h5播放器-xgplayer

为什么要用h5播放器，以及介绍

flash播放器逐渐退出舞台，谷歌宣布后续不支持flash播放器，而对于flash播放器所特有的flv格式视频，h5播放并不兼容flv，为此前哔哩哔哩前端程序员，一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。- flv.js

而西瓜视频将其集成到xgplayer里面，供开发者使用

xgplayer使用方法

1. 创建对象

<div id="vs"></div>

// mp4格式
var player = new Player({
    id: "vs",
    target: "#vs",
    // 填写配置项
})
// flv格式
var player = new FlvJsPlayer({
    id: "vs",
    target: "#vs",
    // 填写配置项
})

{ }括号里填写 配置项

2. api使用方法

player.play()// 触发播放
player.pause()// 暂停
player.destroy()// 播放器销毁
// 等等

官方api查看地址

3. 事件注册/注销

// 永久注册
player.on('事件名',function(){
  //事件名称可以在上述查询
})

// 一次注册
player.once('事件名',function(){

})

// 事件注销
player.off('事件名',function(){

})
// 事件触发
player.emit('事件名')

事件注册/注销方法查看地址

4. 生命周期

let player=new Player({/*配置*/});
// 实例化完成
player.once('ready',()=>{console.log('ready')})
// 视频生成结束
player.once('complete',()=>{console.log('complete')})
// 实例已销毁
player.once('destroy',()=>{console.log('destroy')})

生命周期查看地址

5. 辅助库

// 通常在自定义插件的时候使用
import Player from '../player';
let util = Player.util;
util.createDom...

util

• createDom
• hasClass
• addClass
• removeClass
• toggleClass
• findDom
• format
• event

** sniffer**

• browser
• platform
• version
• device

6. 插件

西瓜视频播放器主张一切设计都是插件，小到一个播放按钮大到一项直播功能支持。想更好的自定义播放器完成自己业务的契合，理解插件机制是非常重要的，播放器本身有很多内置插件，比如报错、loading、重播等，如果大家想自定义效果可以关闭内置插件（内置插件可以在配置项中选择关闭），自己开发即可。

插件路径：packages => xgplayer => src => control

ps：自定义开发插件也存放在此路径

内置插件：

1. play:控制条的播放/暂停按钮，不建议改动。
2. time:控制条的当前时间/视频时长显示组件，可以自定义。
3. volume:控制条的音量控制组件，不建议改动。源码
4. definition:控制条的清晰度切换组件，不建议改动，事件驱动满足任意形式的实现。
5. fullscreen:控制条的全屏切换组件，不建议改动。
6. poster:播放器贴图，不建议改动。
7. progress:播放器进度条和预览图，不建议改动。
8. loading:播放器加载提示，可以自定义。
9. error:播放器错误提示，可以自定义。
10. replay:播放器重播操作界面，可以自定义。
11. playbackRate:播放器倍速播放，不建议改动。
12. makeBullet:播放器弹幕，不建议改动。
13. textTrack:播放器外挂字幕，不建议改动。
14. pip:播放器画中画功能，不建议改动。
15. rotate:播放器旋转控件，可以自定义。
16. download:播放器下载控件，可以自定义。
17. localPreview:播放器预览本地视频功能，不建议改动。
18. i18n:播放器多语种定义，不建议改动，通过配置项增加其他语言。
19. pc:播放器PC交互定义，包括进场动画。

自定义插件：

1. 开发插件

// pluginName.js
import Player from 'xgplayer';

let pluginName=function(player){
  // 插件逻辑
}
Player.install('pluginName',pluginName);

2. 使用插件

import Player from 'xgplayer';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4'
})

自定义插件-文档地址

7. 其他

h5player实例，在线生成代码