加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    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 xgplayer-vue@latest
    2. 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 git@github.com:bytedance/xgplayer-vue.git
    $ cd xgplayer-vue
    $ npm install
    $ npm start

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

    License

    MIT

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/bytedance/xgplayer-vue

    发行版本

    当前项目没有发行版本

    贡献者 4

    开发语言

    • JavaScript 89.4 %
    • Vue 9.1 %
    • HTML 1.5 %