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;
    }
  }
相关推荐
Js_cold1 小时前
FPGA DDR 地址映射-黄金法则
图像处理·fpga开发·音视频·视频
2501_916013745 小时前
iOS 文件管理与 uni-app 性能优化实战 多工具协作的完整指南
android·ios·性能优化·小程序·uni-app·iphone·webview
音视频牛哥5 小时前
低空经济产业白皮书:音视频链路在智能飞行体系中的核心地位
音视频·大牛直播sdk·无人机视频传输rtsp·无人机视频传输rtmp·边缘计算与视频感知 rtsp·rtsp 播放器 sdk·rtmp播放器sdk
lichong9516 小时前
【混合开发】Android+WebView视频图片播放硬件加速详解
android·音视频
摸鱼一级选手7 小时前
uni-app 常用钩子函数:从场景到实战,掌握开发核心
前端·vue.js·uni-app
2501_9151063216 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
iphone10817 小时前
企业内部机密视频安全保护|如何防止企业内部机密视频泄露?
安全·音视频·视频加密·加密技术·视频安全·企业机密·机密视频
音视频牛哥21 小时前
机器人视频感知架构深度解析:7条技术法则,打造低延迟实时感知与交互
人工智能·计算机视觉·机器人·音视频·大牛直播sdk·机器视觉·rtmp rtsp播放器
Ai工具分享1 天前
让模糊物体变清晰的视频AI:快速提升画质指南
人工智能·音视频
菠萝加点糖1 天前
Android 使用MediaMuxer+MediaCodec编码MP4视频
android·音视频·编码