Vue-Video-Player
Video.js for Vue.js
Dependency
Example
Demo page from original vue-video-player
Use Setup
Install vue-video-player
npm install ice48623/vue-video-player --save
// import with ES6// require with Node.js/Webpackvar Vue =var VideoPlayer =// The default is to turn off some of the features, you can choose according to their use of certain features enabled, do not enable the introduction will not require the corresponding file.// You can configure the global function switch (of course, will be covered by local switches), where non-mandatoryVideoPlayer// useVue// --------------------------------------// or use with component(ES6)// usecomponents:videoPlayer
<!-- Use in component(Vue.js1.X && Vue.js2.X) --><!-- Use in component(Vue.js1.X && Vue.js2.X && function switch config) --><!-- Use in component(Vue.js2.X) && event callback --><!-- Use in component(Vue.js2.X) && custom event name && ref property-->
// base - player config example{returnvideoOptions:source:type: "video/webm"src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'// if you need custom player state changed event name, you can config it like thiscustomEventName: 'my-player-state-changed-event-custom-name'}// playbackRates switch and sources switch - player config example{returnvideoOptions:source:type: "video/mp4" src: 'http://example.com/sample_video_H.mp4' label: '原画' res: 1type: "video/mp4" src: 'http://example.com/sample_video_M.mp4' label: '高清' res: 2type: "video/mp4" src: 'http://example.com/sample_video_L.mp4' label: '流畅' res: 3language: 'zh-CN'playbackRates: 07 10 13 15 17poster: 'http://cn.vuejs.org/images/logo.png'defaultSrcReId: 2}// live - player config example{returnvideoOptions:source:type: 'application/x-mpegURL'src: 'https://example.net/live/playlist.m3u8'withCredentials: falselive: true}// youtube - player config example{returnvideoOptions:source:type: "video/youtube"src: "https://www.youtube.com/watch?v=iD_MyDbP_ZE"techOrder: "youtube"autoplay: falsecontrols: falseytControls: true}// vimeo - player config example{returnvideoOptions:source:type: "video/vimeo"src: "https://vimeo.com/167054481"techOrder: "vimeo"autoplay: falsecontrols: false}//-------------------------------------------------------------// player state changed callback event// events with Vue.js1.xevents:{console}// methods with Vue.js2.xmethods:{console}//-------------------------------------------------------------// get current player object in parent componentcomputed:{return this$refsmyPlayerplayer}mounted:consolethisplayer// and do something...
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', 'vimeo'] |
customEventName | String | player state changed event name (default: example) | 'player-state-changed' |