前端视频加水印

import videojs from 'video.js';
import 'video.js/dist/video-js.css'

mounted(){
    
    
	this.$nextTick(function(){
    
    
    	var player = videojs(this.$refs.videoPlayer);
	});
}
/* vjs-text-track-display 是video.js 使用之后插入的dom的class，这个div是定位铺在视频上方的,给它设置背景图，即可实现视频水印的效果*/
// bottom 设置成0
.vjs-text-track-display{
    
    
	bottom: 0;
    background: url("~@/assets/img/bg.png") repeat;
}

注意： video js 的控制条样式可以能会不生效，导致样式混乱，这个时候，需要个video标签加个class “video-js”

<video id="video" class="video-js" controls></video>

videojs默认就是时间是倒数的,并不是所谓的负数,如果你想要使用正常播放器的话

<style type="text/css">
	.video-js .vjs-time-control{
    
    display:block;}
	.video-js .vjs-remaining-time{
    
    display: none;}
</style>

方案二：
可实现自定义文字动态位置水印
额外又引入了另一个插件 videojs-dynamic-watermark, npm 地址： https://www.npmjs.com/package/videojs-dynamic-watermark

import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import 'videojs-dynamic-watermark'

mounted(){
    
    
	this.$nextTick(function(){
    
    
    	var player = videojs(this.$refs.videoPlayer);
    	// 实现动态位置的文字水印，可以自定义水印文案内容，有设置项，可以参考npm里的说明
    	player.dynamicWatermark();
	});
}

以上，亲测有效。