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 Vue.
Updated to video.js 6+.
npm install vue-video-player --save
// require videojs style [and custom videojs theme]
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// 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) {
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:
const { videojs } = VueVideoPlayer
videojs.plugin('myPlugin', myPluginFunction)
videojs.addLanguage('ml', myLanguageObject)
videojs.registerPlugin('examplePlugin', examplePlugin)
// videojs.[methods]...
// or require videojs (plugins || langs || ...)
require('video.js/dist/lang/ba')
require('videos-some-plugins')
require('videos...')
// 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 class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@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: {
// 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
Licensed under either of
at your option.
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.