Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
vue-video-player
Advanced tools
Video/Live player for Vue.js(1.x ~ 2.x) 基于 video.js + videojs-resolution-switcher + videojs-contrib-hls + videojs-youtube
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')
// 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. 默认有些功能是不开启的,比如youtube国内不能用,则默认是关闭的,如果不启用对应的功能,则不会引入对应的包,减少项目代码体积,当然也有可能意味着对应的功能可能会出错,true 是开启,false是关闭,正常情况使用者不需要care就可以。
// Example(Only applies to the current global mode). 用配置项的话仅支持全局模式来配置,否则不会生效
VideoPlayer.config({
youtube: true, // default false
switcher: false, // default true
hls: false // default true
})
// 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)
}
}
}
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'] |
FAQs
Video.js component for Vue
The npm package vue-video-player receives a total of 7,542 weekly downloads. As such, vue-video-player popularity was classified as popular.
We found that vue-video-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.