vue-video-player

Vue-Video-Player

Video/Live player for Vue.js 基于 video.js + videojs-resolution-switcher + videojs-contrib-hls

V1.0.0

• 支持Hls格式直播、录播类型视频
• 录播视频支持多种分辨率切换
• 录播视频支持播放速度切换
• 可根据环境自动降级为flash播放

Example

Demo

Use Setup

# install vue-video-player
npm install vue-video-player --save


# Vue use

## import with ES6
import Vue from 'vue'
...
import VideoPlayer from 'vue-video-player'


## require with Node.js/Webpack
var Vue = require('vue')
...
var VideoPlayer = require('vue-video-player')

## use
Vue.use(VideoPlayer)


# use in components
<video-player :options="videoOptions"></video-player>


# component config example 1(video)
data () {
  return {
     videoOptions: {
      source: {
        type: "video/webm", 
        src: 'http://techslides.com/demos/sample-videos/small.webm',
        muted: true
      }
    }
  }
}


# component config example 2(video)
data () {
  return {
    videoOptions: {
      source: [
        { type: "video/mp4", src: 'http://7xnbft.com2.z0.glb.clouddn.com/sample_video_H.mp4', label: '原画', res: 1 },
        { type: "video/mp4", src: 'http://7xnbft.com2.z0.glb.clouddn.com/sample_video_M.mp4', label: '高清', res: 2 },
        { type: "video/mp4", src: 'http://7xnbft.com2.z0.glb.clouddn.com/sample_video_L.mp4', label: '流畅', res: 3 }
      ],
      language: 'zh-CN',
      playbackRates: [0.7, 1.0, 1.3, 1.5, 1.7],
      poster: 'http://cn.vuejs.org/images/logo.png',
      defaultSrcReId: 2
    }
  }
}

# component config example 3(live)
data () {
  return {
     videoOptions: {
      source: 'http://7xnbft.com2.z0.glb.clouddn.com/sample_live_video.hls',
      live: true
    }
  }
}

实际效果Look [Demo](https://surmon-china.github.io/vue-video-player)

API

稍后补充

video.js api

More Config

video.js

video.js api

videojs-resolution-switcher

videojs-contrib-hls

Author Blog

Surmon