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;
    }
  }
相关推荐
anyup20 小时前
uView Pro 的主题系统有多强大?3 分钟设计 uni-app 企业级 UI 主题
前端·vue.js·uni-app
Ulyanov1 天前
从零构建现代化Python音频播放器:ttk深度应用与皮肤系统设计
python·架构·音视频·数据可视化
Ulyanov1 天前
音视频分离与音频处理核心技术深度解析 从MP4到高品质音乐文件的完整技术实现
python·音视频
2501_921930831 天前
Flutter for OpenHarmony三方库适配实战:image_picker 图片视频选择
flutter·音视频
Flamingˢ1 天前
ZYNQ+OV5640+VDMA+HDMI视频链路搭建实录:从摄像头采集到实时显示
arm开发·嵌入式硬件·fpga开发·vim·音视频
Black蜡笔小新1 天前
视频融合平台EasyCVR核心技术架构解析与多场景应用实践
架构·音视频
EasyGBS1 天前
国标GB28181视频分析平台EasyGBS视频质量诊断重塑工业园区监控智能运维新生态
大数据·网络·音视频
Wxinxiaozhang1 天前
音频生成bin文件步骤
音视频
怀君1 天前
Uniapp——View布局生成图片转PDF
pdf·uni-app
TEL136997627501 天前
SSS1700音频对录线方案 SSS1700规格书
音视频