<div align="center">
<img src="https://raw.githubusercontent.com/bytedance/xgplayer/master/xgplayer.png" width="384" height="96">
</div>
<div align="center">
<a href="https://www.npmjs.com/package/xgplayer-vue" target="_blank">
<img src="https://img.shields.io/npm/v/xgplayer-vue.svg" alt="npm">
</a>
<a href="https://www.npmjs.com/package/xgplayer-vue" target="_blank">
<img src="https://img.shields.io/npm/l/xgplayer-vue.svg" alt="license">
</a>
<a href="http://commitizen.github.io/cz-cli/">
<img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="commitizen">
</a>
</div>
### Introduction
xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4
it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. [Document](http://h5player.bytedance.com/en/)
xgplayer-vue is the Vue component which encapsulating the xgplayer.
### Start
1. Install
```
$ npm install xgplayer-vue@latest
```
2. Usage
Step 1. Add xgplayer-vue component
```js
import Xgplayer from 'xgplayer-vue';
export default {
components:{
Xgplayer
}
}
```
Step 2. Use in template
```html
<Xgplayer :config="config" @player="Player = $event"/>
```
Step 3. Config for xgplayer
```js
export default {
data () {
return {
config: {
id: 'vs',
url: '/xgplayer-demo.mp4'
},
Player: null
}
}
}
```
You can use 'config' object to pre-config xgplayer, such as size, volume, autoplay and so on. [More config](http://h5player.bytedance.com/en/config/)
'mp4', 'hls', 'flv', 'dash' are supported to play and you should add the plugin you want to use. [Functional Plugins List](http://h5player.bytedance.com/en/plugins/#functional-plugins-list).
'Player' is the xgplayer instance which exposed from the component. You can use 'Player' to access the API of xgplayer as follows.
### API
#### Attributes
```js
console.log(this.Player.currentTime)
```
[More attributes](http://h5player.bytedance.com/en/api/#attributes)
#### Method
```js
this.Player.pause();
```
[More methods](http://h5player.bytedance.com/en/api/#method)
#### Event
```js
this.Player.on('play', ()=>{console.log('play')})
```
[More events](http://h5player.bytedance.com/en/api/#event)
#### Life Cycle
```js
this.Player.once('ready', ()=>{console.log('ready')})
```
[More events](http://h5player.bytedance.com/en/api/#life-cycle)
### Plugins
xgplayer supports your custom plugins for more content viewing [plugins](http://h5player.bytedance.com/en/plugins/)
```js
import Xgplayer from 'xgplayer-vue';
import 'xgplayer-custom';
```
### Demo
```
$ git clone git@github.com:bytedance/xgplayer-vue.git
$ cd xgplayer-vue
$ npm install
$ npm start
```
please visit [http://localhost:9090/index.html](http://localhost:9090/index.html)
### License
[MIT](http://opensource.org/licenses/MIT)
一起快走吧
- 粉丝: 35
- 资源: 4658
最新资源
- Matlab版本2023b的Embedded Coder Support Package for ARM Cortex-M Processors支持包免费分享,1.8G压缩包分成3个(2/3)
- ghostscript-10.0.0
- 医疗保障信息平台定点医药机构接口规范
- Python编程基础入门到高级开发技巧指南
- 手机充电头外观尺寸检测机工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- JSP EIMS系统-OA子系统的设计与开发(源代码+LW).zip
- (JSP)JTBC_CMS_2.0.0.8.zip
- linux java jdk8
- Windows系统上Tomcat的安装与配置详解
- Linux-Shell基础命令语言
- 服装图像数据集,衣服图像数据,包含服装属性
- Matlab版本2023b的Embedded Coder Support Package for ARM Cortex-M Processors支持包免费分享,1.8G压缩包分成3个(3/3)
- glove11111wwee.pdf
- ECharts象形柱图-圣诞愿望清单和山峰高度-4.zip
- ECharts象形柱图-人体含水量-2.zip
- ECharts象形柱图-驯鹿的速度-6.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈