开发者社区> 问答> 正文

使用视频点播的视频全屏之后水印就被遮挡住了。这个问题应该怎么解决呢?

我使用的web播放器播放视频,web网页原本是有水印的,但是使用视频点播的视频全屏之后水印就被遮挡住了。这个问题应该怎么解决呢?
水印元素还是存在的,要额外再做全屏设置吗?

展开
收起
乐天香橙派 2023-09-05 11:39:13 160 0
3 条回答
写回答
取消 提交回答
  • 2023-09-05 19:26:37
    赞同 展开评论 打赏
  • 问题一:如果在使用视频点播的视频全屏之后,水印被遮挡住了,你可以尝试以下解决方法:

    1. 调整CSS样式:检查水印元素的CSS样式,确保其z-index属性设置较高,以使其处于其他元素之上。

    2. 使用绝对定位:将水印元素的定位方式设置为绝对定位(position: absolute),并通过top、bottom、left或right属性来调整水印元素的位置,以确保它不会被其他元素遮挡。

    3. 考虑使用透明背景:如果水印元素有一个不透明的背景,可以尝试将其背景设置为透明,这样即使被其他元素部分遮挡,仍然能够显示水印内容。

    请注意,在应用这些解决方法之前,先在浏览器开发者工具中检查当前HTML和CSS结构,确定是哪个元素导致了水印被遮挡。然后针对该元素进行相应的调整。

    问题二:如果水印元素已经存在,并且在非全屏状态下正常显示,那么通常不需要额外做全屏设置来显示水印。在实现全屏功能时,只需确保水印元素的样式设置正确,如所述的调整CSS样式或使用绝对定位等方法。

    然而,如果全屏状态下水印元素仍然无法正常显示,你可能需要检查全屏模式的CSS样式,特别是与z-index、position和overflow等属性相关的设置。确保全屏模式下的样式不会导致水印被遮挡或隐藏。

    2023-09-05 13:49:03
    赞同 展开评论 打赏
  • 全栈JAVA领域创作者

    针对问题一:

    您可以在全屏播放时,将水印元素的样式设置为绝对定位,使其不受全屏播放的影响。例如:

    .watermark {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 9999;
    }
    

    如果您使用的是 FlutterAliPlayerFactory.createAliListPlayer() 方法创建的播放器,您可以在回调函数 onPlayerStatusChanged 中获取当前播放器的状态,并在全屏播放时将水印元素的样式设置为绝对定位。例如:

    FlutterAliPlayerFactory.createAliListPlayer(
      playerId: 'aliListPlayer',
      onPlayerStatusChanged: (status) {
        if (status == AliPlayerStatus.playing && status.subStatus == AliPlayerSubStatus.live) {
          // 处理直播状态
        } else {
          // 获取当前播放的视频信息
          final videoInfo = status.videoInfo;
          // 在全屏播放时将水印元素的样式设置为绝对定位
          if (status.isFullScreen) {
            setState(() {
              watermarkStyle = watermarkStyle.copyWith(position: Offset(10, 10), zIndex: 9999);
            });
          } else {
            setState(() {
              watermarkStyle = watermarkStyle.copyWith(position: Offset(0, 0), zIndex: 0);
            });
          }
        }
      },
    );
    

    如果您使用的是其他播放器,您可以参考上述方法进行相应的设置。
    针对问题二:

    如果您的水印元素是固定的,您可以在全屏播放时将水印元素的样式设置为绝对定位,使其不受全屏播放的影响。例如:

    .watermark {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 9999;
    }
    

    如果您的水印元素是根据视频的大小动态生成的,您可以在全屏播放时重新生成水印元素,并将其样式设置为绝对定位。例如:

    void _onFullScreenChanged(bool isFullScreen) {
      if (isFullScreen) {
        // 重新生成水印元素
        final watermark = _createWatermark();
        setState(() {
          watermarkElement = watermark;
        });
      } else {
        setState(() {
          watermarkElement = null;
        });
      }
    }
    

    如果您使用的是 FlutterAliPlayerFactory.createAliListPlayer() 方法创建的播放器,您可以在回调函数 onPlayerStatusChanged 中获取当前播放器的状态,并在全屏播放时重新生成水印元素,并将其样式设置为绝对定位。例如:

    FlutterAliPlayerFactory.createAliListPlayer(
      playerId: 'aliListPlayer',
      onPlayerStatusChanged: (status) {
        if (status == AliPlayerStatus.playing && status.subStatus == AliPlayerSubStatus.live) {
          // 处理直播状态
        } else {
          // 获取当前播放的视频信息
          final videoInfo = status.videoInfo;
          // 在全屏播放时重新生成水印元素,并将其样式设置为绝对定位
          if (status.isFullScreen) {
            setState(() {
              watermarkElement = _createWatermark();
              watermarkStyle = watermarkStyle.copyWith(position: Offset(10, 10), zIndex: 9999);
            });
          } else {
            setState(() {
              watermarkElement = null;
              watermarkStyle = watermarkStyle.copyWith(position: Offset(0, 0), zIndex: 0);
            });
          }
        }
    

    },
    );

    2023-09-05 13:26:22
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载