前端视频加水印
借助 video.js 插件,npm地址: https://www.npmjs.com/package/video.js
方案一:
图片背景图
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();
});
}
以上,亲测有效。