支持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：自定义开发插件也存放在此路径

内置插件：

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

自定义插件：

开发插件

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

使用插件

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

自定义插件-文档地址

7. 其他

h5player实例，在线生成代码

支持flv视频播放的h5播放器-xgplayer相关推荐

网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
支持H.265网页播放的H5播放器EasyPlayer.js发布了
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
flash和H5播放器
flash和H5 flash播放器缺点是需要在客户机安装Adobe Flash Player播放器,优点是flflash播放器已经很成熟了,并且浏览器对flflash支持也很好. H5播放器基于 ...
SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
vue - vue中使用西瓜播放器xgplayer
1,安装 # 最新稳定版 $ npm install xgplayer对于已有项目也可以通过 CDN 引入,代码如下: <script src="//unpkg.byted-stati ...

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

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

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

xgplayer使用方法

6. 插件

支持flv视频播放的h5播放器-xgplayer相关推荐

最新文章

热门文章