I am trying to make an incredibly simple page in Vue with a watermarked video player. I’ve managed to successfully use video.js to make the video player, but I’ve been unable to get videojs-watermark to work.
Here is the VideoPlayer.vue component page
<template>
<div>
<video
controls
preload="auto"
ref="videoPlayer" class="video-js vjs-theme-city"></video>
</div>
</template>
<style scoped>
@import 'https://unpkg.com/video.js@7/dist/video-js.min.css';
@import 'https://unpkg.com/@videojs/themes@1/dist/city/index.css';
</style>
<script>
import videojs from 'video.js';
import watermark from 'videojs-watermark';
export default {
name: 'VideoPlayer',
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
}
},
mounted() {
videojs.registerPlugin('watermark', watermark);
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
this.player.log('onPlayerReady', this);
});
this.player.watermark({
file: 'src/assets/Watermark.png',
xpos: 50,
ypos: 50,
xrepeat: 1,
opacity: 0.5,
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
}
</script>
In this the video player works, but the watermark doesn’t.
On this line
import watermark from 'videojs-watermark';
I get the following warning:
Could not find a declaration file for module ‘videojs-watermark’. ‘e:/Georg HDD Backup/Level 6/Apprenticeship/VidDistribProto/node_modules/videojs-watermark/es5/plugin.js’ implicitly has an ‘any’ type.
Trynpm i --save-dev @types/videojs-watermark
if it exists or add a new declaration (.d.ts) file containingdeclare module 'videojs-watermark';
Vetur(7016)
I’ve tried the solutions the warning presents, but npm i --save-dev @types/videojs-watermark
coughs up an error and creating a folder in @types with a .d.ts file shuts the warning up but the watermark still doesn’t show up.
What else can I try?
Thanks a lot!