uniapp-视频video播放兼容问题-圆角实现

1.实现支付宝小程序-视频圆角,使用border-radius无法实现

真机测试无效

只能使用css在四个角覆盖上去了

javascript 复制代码
    <div class="tips">
      <video
        id="myVideo"
        objectFit="cover"
        style="width: 100%"
        autoplay
        :show-fullscreen-btn="false"
        :show-play-btn="false"
        :controls="false"
        :show-center-play-btn="false"
        :show-loading="false"
        :show-mute-btn="false"
        muted
        loop
        src="https://XXX.mp4"
        poster="@/static/image/XXX.jpg"
      ></video>
      <div class="box_right_top"></div>
      <div class="box_right_bottom"></div>
      <div class="box_left_top"></div>
      <div class="box_left_bottom"></div>
    </div>
javascript 复制代码
  .tips {
    width: 100%;
    position: relative;
    //所有控件
    video::-webkit-media-controls-enclosure {
      display: none;
    }

    /* 隐藏video 全屏按钮 */
    video::-webkit-media-controls-fullscreen-button {
      display: none;
    }
    /* 隐藏video 播放按钮 */
    video::-webkit-media-controls-play-button {
      display: none;
    }

    /* 隐藏video 音量按钮 */
    video::-webkit-media-controls-mute-button {
      display: none;
    }

    .box_right_top {
      background-image: radial-gradient(
        circle at left bottom,
        transparent 18rpx,
        #f7f8fa 0
      );
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 18rpx;
      height: 18rpx;
    }

    .box_left_top {
      background-image: radial-gradient(
        circle at right bottom,
        transparent 18rpx,
        #f7f8fa 0
      );
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 18rpx;
      height: 18rpx;
    }

    .box_right_bottom {
      background-image: radial-gradient(
        circle at left top,
        transparent 18rpx,
        #f7f8fa 0
      );
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;
      width: 18rpx;
      height: 18rpx;
    }

    .box_left_bottom {
      background-image: radial-gradient(
        circle at right top,
        transparent 18rpx,
        #f7f8fa 0
      );
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      width: 18rpx;
      height: 18rpx;
    }
  }
相关推荐
Rysxt_1 天前
uni-app路由跳转完全指南:从基础到高级实践
uni-app
jbk33111 天前
开发了一个免费的批量视频语音字幕识别工具,核心点是可批量自动处理识别任务
音视频
Coovally AI模型快速验证1 天前
超越Sora的开源思路:如何用预训练组件高效训练你的视频扩散模型?(附训练代码)
人工智能·算法·yolo·计算机视觉·音视频·无人机
weixin_436804071 天前
音频在线预览工具 - 输入URL即刻播放远程音频
音视频
一壶纱1 天前
UniApp + Pinia 数据持久化
前端·数据库·uni-app
kaizq1 天前
AI-MCP本地流媒音频服务器设计与CherryStudio部署应用
音视频·cherrystudio·fastmcp·streamablehttp·本地mcp流媒服务器
thinkMoreAndDoMore1 天前
audioservice
音视频
TEL189246224771 天前
IT6517BFN:单芯片DisplayPort转VGA转换器,集成MCU
音视频·实时音视频·视频编解码
TEL189246224771 天前
IT6516BFN:单芯片DisplayPort转VGA转换器,集成MCU
音视频·实时音视频·视频编解码
Facechat1 天前
视频混剪-WebCodecs导出视频
音视频