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.js player component for Vue2.
The latest version of the update, I hope the component itself is a simple and lightweight player, in addition to the videojs core library itself, no other packages; if you need other videojs extensions, you need to import the corresponding scriptjs plugin in the entry script file or component script Resource package.
npm install vue-video-player --save
// import
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// or require
var Vue = require('vue')
var VueVideoPlayer = require('vue-video-player')
// mount with global
Vue.use(VueVideoPlayer)
// If used in Nuxt.js/SSR, you should keep it only in browser build environment
if (process.BROWSER_BUILD) {
const VueVideoPlayer = require('vue-video-player/ssr')
Vue.use(VueVideoPlayer)
}
// If you need to use more videojs extensions, you can introduce the corresponding videojs plug-in package before the vue program is instantiated, such as:
require('some-videojs-plugin')
// require more plugin resource...
// mount with component(can't work in Nuxt.js/SSR)
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
}
}
SSR and the only difference in the use of the SPA:
component
, find videojs instance by ref attribute
.directive
, find videojs instance by directive arg
.<!-- You can custom the "myVideoPlayer" name used to find the videojs instance in current component -->
<template>
<div class="video-player-box"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
v-video-player:myVideoPlayer="playerOptions">
</div>
</template>
<script>
export default {
mounted() {
console.log('this is current videojs instance object', this.myVideoPlayer)
}
// Omit the same parts as in the following component sample code
// ...
}
</script>
<template>
<video-player ref="videoPlayer"
:options="playerOptions"
title="you can listen some event if you need"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
title="or listen state change"
@statechanged="playerStateChanged($event)"
title="The prepared event will be triggered after the videojs program instance completes, and its callback player object is the videojs callback function in this context"
@ready="playerReadied">
</video-player>
</template>
<script>
// Similarly, you can also introduce the plugin resource pack you want to use within the component
// require('some-videojs-plugin')
export default {
data() {
return {
playerOptions: {
// component options
start: 0,
playsinline: false,
// videojs options
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "/static/images/author.jpg",
}
}
},
mounted() {
console.log('this is current player instance object', this.player)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
// ...player event
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
console.log('the player is readied', player)
// you can use it to do something...
// player.[methods]
}
}
}
</script>
component api:
video.js api
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.