uni-app中subNVue实现视频水印且不影响视频操作

在uni-app中，要在subNVue中实现视频水印且不影响视频操作，可以通过在subNVue页面中使用一个覆盖在视频播放组件上的透明图层来实现水印效果。这里是一个简单的代码示例，展示了如何在subNVue页面中实现这一功能。

首先，确保你的项目中已经启用了subNVue页面。然后，你可以按照以下步骤来实现视频水印：

1. 创建subNVue页面： 在pages.json中配置subNVue页面，例如：

   {
     "pages": [
       {
         "path": "pages/subNVue/subNVue",
         "style": {
           "navigationBarTitleText": "subNVue页面",
           "app-plus": {
             "titleNView": false,
             "autoBackButton": true,
             "type": "subNVue"
           }
         }
       }
     ]
   }
   

2. 编写subNVue页面的HTML： 在pages/subNVue/subNVue.nvue中，使用<video>组件播放视频，并在其上添加一个包含水印的<div>。

   <template>
     <div class="container">
       <video
         id="video"
         src="path/to/your/video.mp4"
         controls
         autoplay
         style="width: 100%; height: 100%;"
       ></video>
       <div class="watermark">水印文字</div>
     </div>
   </template>
   
   <style>
   .container {
     position: relative;
     width: 100%;
     height: 100%;
   }
   .watermark {
     position: absolute;
     bottom: 10px;
     right: 10px;
     color: rgba(255, 255, 255, 0.5); /* 半透明水印 */
     font-size: 24px;
     pointer-events: none; /* 确保水印不影响视频操作 */
   }
   </style>
   

3. 注意事项：

   • pointer-events: none;样式确保水印图层不会拦截任何触摸事件，从而不会影响用户对视频的操作。
   • 根据需要调整水印的位置、颜色和大小。
   • 确保视频路径正确，并且视频文件已正确放置在项目中。

通过上述代码，你可以在subNVue页面中实现一个带有水印的视频播放功能，同时水印不会影响用户对视频的正常操作。这种方法利用了CSS的定位和透明属性，以及pointer-events属性来确保水印不会影响视频的操作。根据实际需求，你可以进一步调整水印的样式和位置。