JavaScript实现网页视频添加水印的示例代码

目录

• 示例图
• 原理
• 代码示例

示例图

原理

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

代码示例

index.html

    
    
    
    
  
  
    
  


  

            

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

              

            
             
             

                 
                 

                     
                 
                 

                     
                         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实现网页视频添加水印的示例代码的详细内容，更多关于JavaScript网页视频水印的资料请关注脚本之家其它相关文章！