通过样式覆盖修改Tcplayer动态水印样式

效果图：

在线demo

覆盖样式代码：

代码语言：javascript复制

    .tcp-dynamic-watermark-container .tcp-dynamic-watermark-content { 
      font-size: 30px;
      color: red;
    }

全部demo代码

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
    />
    <title>腾讯云视频点播示例</title>
    <link
      href="https://web.sdk.zijiebao.com/player/tcplayer/release/v4.2.1/tcplayer.min.css"
      rel="stylesheet"
    />
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
    <script src="https://web.sdk.zijiebao.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.zijiebao.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .tcplayer {
        margin: 0 auto;
      }
      .tcp-dynamic-watermark-container .tcp-dynamic-watermark-content {
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 设置播放器容器 -->
    <video
      id="player-container-id"
      preload="auto"
      width="640"
      height="360"
      playsinline
      webkit-playsinline
    ></video>
    <!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器

  speed: 0.2,// 建议取值范围 0< speed <=1，默认值 0.2
  content: "7447398157015849771" // 类型必须为String，

  // 注意：
  // 1. 水印移动范围为实际视频显示区域，如果视频自带黑边，播放器无法进行规避。
  // 2. 在使用动态水印功能时，播放器对象的引用不能暴露到全局环境，否则动态水印可以轻易去除。
  // 3. 动态水印不适合移动端场景，特别是劫持播放的场景。常见问题：https://cloud.tencent.com/document/product/881/20219
  // 4. 可以通过屏蔽全屏按钮，规避部分全屏后被劫持导致水印失效的情况。
  // 5. 动态水印目前为测试功能，有问题请联系技术支持。

  // 动态水印插件的其他方法
  // player.DynamicWatermark().pauseAnimation() // 暂停动态水印动画，这时不能去掉水印的dom节点
  // player.DynamicWatermark().resumeAnimation() // 恢复动态水印动画，这时不能去掉水印的dom节点
  // player.DynamicWatermark().startAnimation() // 开始动态水印动画。
  // player.DynamicWatermark().stopAnimation() // 停止动态水印动画，这时可以去掉水印的dom节点。不建议使用

-->
    <script>
      var player = TCPlayer("player-container-id", {
        fileID: "7447398157015849771",
        appID: "1256993030",
        plugins: {
          DynamicWatermark: {
            speed: 0.2,
            content: "7447398157015849771",
          },
        },
      });
    </script>
  </body>
</html>

云点播

0 人点赞