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;
    }
  }
相关推荐
DogDaoDao8 小时前
H.266/VVC 双雄对决:VTM vs VVenC 深度对比分析
音视频·视频编解码·vvc·vtm·h.266·视频压缩·vvenc
无线视频解决方案12 小时前
HDMI直出vsMIPI转接对比:AM8360D为何能省2颗芯片
音视频·无线图传·炬力北方
ai产品老杨12 小时前
边云协同视频分析性能优化指南:多站点部署下的参数配置与排查清单(边缘推理+云端管理)
性能优化·音视频
JackieDYH12 小时前
uniapp-通知滚动组件+轮播图组件封装-案例
uni-app·轮播图·通知
程序员老陆14 小时前
OpenGL 在视频渲染里的角色:它到底加速了什么?
音视频·gpu·opengl
熊猫钓鱼>_>14 小时前
Seedance 2.0 技术深度解析:重构AI视频生成的世界模型新范式
人工智能·笔记·ai·重构·音视频·变革·sedence2.0
弈语道破AI15 小时前
3D渲染不再熬时间!即梦 Seedance 2.5 具备3D白模渲染功能的AI视频生成工具
人工智能·3d·音视频
AI创界者15 小时前
最新 ComfyUI + LTX-2.5 本地一键整合包:文生视频/图生视频/数字人全流程指南
人工智能·aigc·音视频
阿童木写作15 小时前
速卖通卖家图片翻译工具:批量图片翻译+视频字幕+智能抠图一站式搞定
大数据·人工智能·python·音视频
hans汉斯1 天前
《软件工程与应用》期刊推荐&10月版面征稿中
图像处理·人工智能·深度学习·算法·音视频·软件工程