video.js插件全屏水印消失问题

楚天阔.

已于 2024-10-23 17:40:18 修改

阅读量430

点赞数 1

文章标签：前端

于 2024-08-30 13:36:55 首次发布

本文链接：https://blog.youkuaiyun.com/shangyupeng_/article/details/141711842

版权

最近项目中要求文件预览要添加水印,但是视频全屏的时候会调用浏览器的方法将视频置顶在最顶层,然后水印被遮挡,各种调层级不管用
在这里插入图片描述
不全屏还好能正常显示,一旦全屏

全屏无水印

这个是在video.js的基础上修改的,如果项目里已有videojs的话,只需引入一两个文件就可以,我是在demo的基础上做了一些改动,没有使用videojs.watermark.css,由于项目本身就是用video.js插件,最后只引入了一个video.js文件
在这里插入图片描述
videojs-waterMark.html是demo我做了修改之后的文件,由于不具有通用性我就不展示代码了,最后实现的效果是,只需传入视频的src和要显示的水印文本就可以视频全屏显示水印.效果如图

水印视频

页面引用如下:

videoPreview: function (filePath, shareType, fileId, shareId, fileName) {
        var url = "/web/preview/preview" + "?shareType=" + shareType + "&fileId=" + fileId + "&shareId=" + shareId;
        var enFilePath = encodeURIComponent(url);
        var currentUid = localStorage.getItem('uid');

        if (!Ext.isIE8) {
            var previewFilePanel = Ext.create({
                xtype: 'previewbox',
                id: 'previewbox',
            });

            previewFilePanel.setHeight(500);
            previewFilePanel.setWidth(750);
            previewFilePanel.name = fileName;

            previewFilePanel.add({
                xtype: 'component',
                renderTpl: '<iframe style="width: 100%; height: 100%; border: none;" src="resources/video/web/videojs-waterMark.html?file=' + enFilePath + '&currentUid=' + currentUid + '"></iframe>'
            });

            previewFilePanel.show();
        } else {
            Ext.toast("该浏览版本过低，不支持视频文件预览，请更新至最新版本或更换浏览器预览");
        }
    }

videojs-waterMark.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Video.js Dynamic Watermark Text Example</title>
  <meta charset="utf-8" />
<!--  <link href="../video.js/video-js.css" rel="stylesheet">-->
<!--  <script src="../video.js/video.js"></script>-->
  <link href="video-js.css" rel="stylesheet">
  <script src="video.js"></script>
  <style>
    p {
      background-color: #eee;
      border: thin solid #777;
      padding: 10px;
    }
    .vjs-watermark-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* 确保水印不阻止视频操作 */
      z-index: 9999; /* 保证水印在最顶层 */
    }
    .vjs-watermark-text {
      font-family: "Times New Roman";
      font-size: 30px;
      color: rgba(0, 0, 0, 0.07);
      transform: rotate(-20deg);
      white-space: nowrap;
    }
    /*播放按钮调制视频正中央*/
    .video-js .vjs-big-play-button {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }

  </style>
</head>
<body>
<!--将视频居于previewBox的正中央-->
<div class="previewbox" style="display: flex; justify-content: center; align-items: center; height: 90vh; width: 100%;">
  <video id="video_1" class="video-js vjs-default-skin" width="640" height="264" controls></video>
</div>


<script>
  var url=window.location.href;
  var currentUid=decodeURIComponent((url.substring(url.indexOf("currentUid=")+11)).substr());

  let startIndex = url.indexOf('file=') + 5;

  // 找到 'gh' 的开始位置
  let endIndex = url.indexOf('currentUid');

  // 截取从 'bcd' 后面到 'gh' 前面的部分
  var videoPath = decodeURIComponent(url.substring(startIndex, endIndex));

  var my_video_id = videojs('video_1');
  // 设置视频源
  my_video_id.src({
    type: 'video/mp4',
    src: videoPath
  });

  // 创建水印容器
  var watermarkContainer = document.createElement('div');
  watermarkContainer.className = 'vjs-watermark-container';

  // 添加水印容器到视频播放器
  var videoContainer = my_video_id.el();
  videoContainer.appendChild(watermarkContainer);

  // 动态生成水印文本
  function generateWatermarkGrid() {
    watermarkContainer.innerHTML = ''; // 清空之前的水印内容

    // 获取视频容器的宽度和高度
    var containerWidth = videoContainer.offsetWidth;
    var containerHeight = videoContainer.offsetHeight;

    // 设置每行每列的水印间距
    var watermarkSpacingX = 250;
    var watermarkSpacingY = 175;

    // 计算需要的行数和列数
    var rows = Math.ceil(containerHeight / watermarkSpacingY);
    var cols = Math.ceil(containerWidth / watermarkSpacingX);

    // 生成水印文本网格
    for (var i = 0; i < rows; i++) {
      for (var j = 0; j < cols; j++) {
        var watermarkText = document.createElement('div');
        watermarkText.className = 'vjs-watermark-text';
        watermarkText.textContent = currentUid;
        watermarkText.style.position = 'absolute';
        watermarkText.style.top = (i * watermarkSpacingY) + 'px';
        watermarkText.style.left = (j * watermarkSpacingX) + 'px';
        watermarkContainer.appendChild(watermarkText);
      }
    }
  }

  // 全屏事件监听
  // 全屏事件监听
  function handleFullscreenChange() {
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
      generateWatermarkGrid(); // 如果在全屏模式下，生成水印网格
    } else {
      watermarkContainer.innerHTML = ''; // 如果退出全屏，清空水印
    }
  }

  // 监听全屏事件
  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
  document.addEventListener('MSFullscreenChange', handleFullscreenChange);

  // 初次加载时生成水印网格
  // generateWatermarkGrid();
</script>
</body>
</html>