bytedance / xgplayer-vue Goto Github PK

View Code? Open in Web Editor NEW

232.0 10.0 53.0 137.66 MB

Vue component for xgplayer, a HTML5 video player with a parser that saves traffic

License: MIT License

JavaScript 89.35% HTML 1.53% Vue 9.13%

xgplayer-vue's Introduction

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

xgplayer-vue is the Vue component which encapsulating the xgplayer.

Start

Install
```
$ npm install xgplayer-vue@latest
```
Usage

Step 1. Add xgplayer-vue component
```
import Xgplayer from 'xgplayer-vue';
export default {
  components:{
    Xgplayer
  }
}
```
Step 2. Use in template
```
<Xgplayer :config="config" @player="Player = $event"/>
```
Step 3. Config for xgplayer
```
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

'mp4', 'hls', 'flv', 'dash' are supported to play and you should add the plugin you want to use. 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

console.log(this.Player.currentTime)

More attributes

Method

this.Player.pause();

More methods

Event

this.Player.on('play', ()=>{console.log('play')})

More events

Life Cycle

this.Player.once('ready', ()=>{console.log('ready')})

More events

Plugins

xgplayer supports your custom plugins for more content viewing plugins

import Xgplayer from 'xgplayer-vue';
import 'xgplayer-custom';

Demo

$ git clone [email protected]:bytedance/xgplayer-vue.git
$ cd xgplayer-vue
$ npm install
$ npm start

please visit http://localhost:9090/index.html

License

MIT

xgplayer-vue's People

Contributors

Stargazers

Watchers

xgplayer-vue's Issues

文件这么大么，

文件这么大么，下载到55%，就卡死了，
工程哪里有问题，git更新不下来啊

vue项目（移动端）里设置视频宽高和fluid为true，不能自适应（Chrome下调试），而且原生<video>标签的controls的样式也无法被覆盖，是为啥啊

The requested module '/node_modules/xgplayer/dist/index.js?v=f9f41c0b' does not provide an export named 'default'

按readme.md配置的。

<template>
  <Xgplayer :config="config" @player="Player = $event"/>

</template>

<script>
import Xgplayer from 'xgplayer-vue';
export default {
  data () {
    return {
      config: {
        id: 'vs',
        url: 'http://127.0.0.1:8080/xgplayer-demo.mp4'
      },
      Player: null
    }
  }
}
</script>

没啥问题吧。

报错

The requested module '/node_modules/xgplayer/dist/index.js?v=f9f41c0b' does not provide an export named 'default'

vit+vue3 引入会报错

does not provide an export named 'default' (at xgplayer-vue.vue:7:8)

如何动态设置播放url，比如从远程获取然后设置

1.如何动态设置播放url，比如从远程获取然后设置；
2.config里边必须要设置视频源么，如果不设置，怎么默认占位

:config="getVideoConfig() 用函数返回值的方式配置config 会重复多展示一个视频大佬遇见过没

无法监听除了ready以外的事件

<Xgplayer :config="config" @player="Player = $event"/>

this.Player.on('ready', ()=>{ console.log('ready') })
正常输出 => // ready

this.Player.on('play', ()=>{ console.log('play') })
无法监听play事件

vue，移动端如何使用插件带的操作菜单，比如播放之类的。我在移动端都是展示的原生的

ios播放提示不支持的视频格式

我采用的mp4的格式视频，然后30帧率的就没有问题，25视频帧率的就有问题

怎么设置进度条禁用？

配置里面 ignores：[‘progress’] 未生效，就算不能关闭，那禁用进度条的点击和拖动也可以啊

有计划升级2.0.3？

想问问url配置不能用本地视频吗

开发中...

<script>
import Xgplayer from 'xgplayer-vue'
export default {
  name: 'App',
  components: {
    Xgplayer,
  },
  data() {
    return {
      config: {
        id: 'vs',
        url: './assets/video/wn.mp4',
        // poster: './assets/img/舞娘.jpg',
      },
      Player: null,
    }
  },
}
</script>

确定路径以及文件名无误，但是开发调试的时候控制台一直报错

想问问是模块问题吗？

我测试了一下在线视频好像是没问题的