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;
    }
  }
相关推荐
“码”力全开1 小时前
解密企业级智能视频中台:基于 Docker 与边缘计算的 GB28181/RTSP 异构架构设计(支持源码交付)
docker·音视频·边缘计算
潜创微科技1 小时前
QCW5007+QCW5004 | HDMI 1.3 无线投屏芯片方案空旷 150 米支持穿墙传输
音视频
MemoriKu2 小时前
Flutter 相册 APP 视频模态稳定化实战:从视频抽帧、Embedding 元数据到 Android 真机启动修复
android·开发语言·前端·flutter·架构·音视频·embedding
EasyDSS2 小时前
视频直播点播/高清点播/音视频点播/云点播/云直播EasyDSS一站式音视频平台助力智慧校园智能化建设
音视频
johnny2332 小时前
视频创作工具:OpenCut、HyperFrames、social-auto-upload、OpenStoryline、ArcReel
音视频
换个昵称都难3 小时前
WebRTC 视频RTP 优化模块
音视频·webrtc
EasyGBS3 小时前
国标GB28181成安防刚需,国标GB28181视频平台EasyGBS如何成为视频上云最优解?
音视频
luoyayun3613 小时前
Qt/QML 音频波形图模块实现:从 PCM 数据到可缩放波形
qt·音视频·波形图绘制
hz567893 小时前
医院LIS系统如何对接视频会议系统?远程诊疗协同方案详解
音视频·实时音视频·信息与通信
鲲穹AI超级员工3 小时前
多款音视频 & 电子书格式工具实测分享,日常素材处理够用了
音视频·电子书格式