Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
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 5,486 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.