导航：首页 > 开发技术 >

怎么用JavaScript实现网页视频添加水印

发表于：2026-11-01 作者：千家信息网编辑

千家信息网最后更新 2026年11月01日，这篇"怎么用JavaScript实现网页视频添加水印"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一

千家信息网最后更新 2026年11月01日怎么用JavaScript实现网页视频添加水印

这篇"怎么用JavaScript实现网页视频添加水印"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"怎么用JavaScript实现网页视频添加水印"文章吧。

原理

通过html的页面布局，在video播放器层面，通过js控制dom,插入文本水印代码。

代码示例

index.html

                    html5视频水印                                                
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
            
                                                                                                  
                                                               00:00:00                     /                                              00:00:00

核心代码

$(".span").html("water-mark");

"water-mark"字段添加要打的水印内容。也可以动态添加水印内容。

样式waterMarkVideo.css代码

body,div,img{    margin: 0;    padding: 0;    border: 0;}#container{    width: 640px;   border: 1px solid pink;}.pos{   width: 640px;   height: 60px;   background: rgba(0,0,0,0.5);   margin-top: -63px;   position: relative;   }#playBtn{   position:relative;   top: 10px;   left: 20px;   cursor: pointer;}#progress{   height: 12px;   width: 100%;   position: relative;   top: -27px;   cursor: pointer;   }.timebox{   position:absolute;   top: 20px;   right: 80px;   cursor: pointer;   color: white;}#full{   position:absolute;   top: 12px;   right: 20px;   cursor: pointer;}.video-watermark-item {    left: 15%;    top: 10%;    font-size: 20px;    color: rgba(240,240,240,0.3);    font-family: 方正黑体;    -o-transform: translate(-15%, -50%) rotate(-35deg);    -webkit-transform: translate(-15%, -50%) rotate(-35deg);    -moz-transform: translate(-15%, -50%) rotate(-35deg);    -ms-transform: translate(-15%, -50%) rotate(-35deg);    transform: translate(-15%, -50%) rotate(-35deg);    position: absolute;    overflow: hidden;}.noselect {  display: inline-block;  padding: 100px;}

以上就是关于"怎么用JavaScript实现网页视频添加水印"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。

很赞哦！