Vue-Video-Player

Video/Live player for Vue.js(1.x ~ 2.x) 基于 video.js + videojs-resolution-switcher + videojs-contrib-hls + videojs-youtube

• [增加]：可以配置在IOS（非safari）环境下，默认播放是否全屏
• 支持HlS流媒体（.m3u8）直播、各种普通类型视频
• 普通视频可支持多种分辨率切换
• 普通视频可支持多种播放速度切换
• 可根据环境自动降级为flash播放
• 可播放Youtube视频
• 支持Vue.js(1.x ~ 2.x)全版本
• 基于Video.js有丰富的API和文档支持

Example

Demo Page

Use Setup

Install vue-video-player

npm install vue-video-player --save

// 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)

// --------------------------------------


// or use with component(ES6)
import Vue from 'vue'
// ...
import { videoPlayer } from 'vue-video-player'

// use
export default {
  components: {
    videoPlayer
  }
}

<!-- Use in component(Vue.js1.X) -->
<video-player :options="videoOptions"></video-player>

<!-- Use in component(Vue.js2.X) -->
<video-player :options="videoOptions" @playerStateChanged="playerStateChanged"></video-player>

<!-- parent component to control the player do something -->
<button @click="playerAction('play')">Play</button>
<button @click="playerAction('pause')">Pause</button>
<button @click="playerAction('refresh')">Refresh</button>

// component config example 1(video)
export default {
  data () {
    return {
       videoOptions: {
        source: {
          type: "video/webm", 
          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
        }
      }
    }
  }
}


// component config example 2(video)
export default {
  data () {
    return {
      videoOptions: {
        source: [
          { type: "video/mp4", src: 'http://example.com/sample_video_H.mp4', label: '原画', res: 1 },
          { type: "video/mp4", src: 'http://example.com/sample_video_M.mp4', label: '高清', res: 2 },
          { type: "video/mp4", src: 'http://example.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)
export default {
  data () {
    return {
       videoOptions: {
        source: {
          type: 'application/x-mpegURL',
          src: 'https://example.net/live/playlist.m3u8',
          withCredentials: false
        },
        live: true,
        // IOS微信内置浏览器默认播放不全屏
        playsinline: true
      }
    }
  }
}

// component config example 4(youtube)
export default {
  data () {
    return {
      videoOptions: {
        source: {
          type: "video/youtube",
          src: "https://www.youtube.com/watch?v=iD_MyDbP_ZE"
        },
        techOrder: ["youtube"],
        autoplay: false,
        controls: false,
        ytControls: true
      }
    }
  }
}

//-------------------------------------------------------------

// playerStateChanged callback example(Vue.js1.X)
export default {
  events: {
    'playerStateChanged': function (playerCurrentState) {
      console.log(playerCurrentState)
    }
  }
}


// playerStateChanged callback example(Vue.js2.X)
export default {
  methods: {
    playerStateChanged(playerCurrentState) {
      console.log(playerCurrentState)
    }
  }
}

//-------------------------------------------------------------

// playerAction event example(Vue.js1.X)
export default {
  methods: {
    playerAction: function(action) {
      this.$broadcast('playerAction', action)
    }
  }
}


// playerAction event example(Vue.js2.X)
export default {
  methods: {
    playerAction(action) {
      this.$emit('playerAction', action)
    }
  }
}

More Code Example

API

protype	type	description	example
playsinline	Boolean	the player default play auto fullscreen in IOS(!safari) (Y/n) default: true
source	Object/Array	the player source src(required)
muted	Boolean	default: false
autoplay	Boolean	default: true
start	Number	player start time(default: 0)
live	Boolean	player is live?
playbackRates	Array	player play backrates	[0.7, 1.0, 1.3, 1.5, 1.7]
defaultSrcReId	Number	When there are multiple sources, used to specify the default source (default:　1)
controls	Boolean	player controls display or hidden
preload	Boolean	player preload ?
poster	String	player poster(default: '')	'http://adasd.jpg' / 'data:image/png;base64,iVB...'
width	Number	player width (default: 100%)
height	Number	player height (default: 360)
controlBar	Object	player controlBar dsipaly config	need to video.js api doc
language	String	player language(default: 'en')
techOrder	Array	player support video type (default: example)	['html5', 'flash', 'youtube']

Credits

video.js

video.js api

videojs-resolution-switcher

videojs-contrib-hls

videojs-youtube

Author Blog

Surmon