xgplayer-vue

by bytedance

bytedance /xgplayer-vue

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

141 Stars 27 Forks Last release: Not found MIT License 6 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

  1. Install

    $ npm install [email protected]
    
  2. Usage

    Step 1. Add xgplayer-vue component

    js
    import Xgplayer from 'xgplayer-vue';
    export default {
      components:{
        Xgplayer
      }
    }
    

    Step 2. Use in template

    html
    
    

    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

    '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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.