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;
    }
  }
相关推荐
王者鳜錸9 分钟前
企业解决方案三-讯飞音频文件转文字+豆包智能体实现音频信息提炼
音视频
AI服务老曹2 小时前
打破视频孤岛:基于 ZLMediaKit 的 GB28181 与 RTSP 统一接入网关架构设计
人工智能·spring boot·音视频
铁盒薄荷糖12 小时前
YT-DLP :基于 youtube-dl 的命令行视频下载工具
音视频
潜创微科技14 小时前
4K 转 MIPI 硬核方案|ITE IT6616 HDMI1.4 转 MIPI CSI/DSI 转换芯片解析
嵌入式硬件·音视频
Code-keys14 小时前
Android Codec2 Filter 算法模块开发指南
android·算法·音视频·视频编解码
EasyDSS17 小时前
私有化视频会议系统/企业级融媒体生产管理平台EasyDSS一体化视频平台赋能各行业数字化
音视频·媒体
2601_9495936520 小时前
Flutter_OpenHarmony_三方库_image_picker图片视频采集适配详解
flutter·音视频
笨笨狗吞噬者21 小时前
uni-app 运行时揭秘:styleIsolation 的转化
前端·微信小程序·uni-app
神の愛1 天前
JeecgBoot-Uniapp
uni-app
hqyjzsb1 天前
传统剪辑师升级AI视频生成师后接单效率与收入变化
人工智能·aigc·服务发现·音视频·学习方法·业界资讯·ai写作