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;
    }
  }
相关推荐
byte轻骑兵18 分钟前
【LE Audio】BASS精讲[3]: 从服务声明到行为逻辑 解锁广播音频接收核心
音视频·实时音视频·le audio·低功耗音频·蓝牙通话
ai产品老杨43 分钟前
深度解析:基于异构计算的工业级AI视频中台架构,如何实现GB28181/RTSP跨平台部署与源码交付?
人工智能·架构·音视频
枫叶丹41 小时前
【HarmonyOS 6.0】AVCodec Kit 视频解码器平滑停用机制详解
开发语言·华为·音视频·harmonyos
ai产品老杨2 小时前
告别重复造轮子:深度解析支持源码交付的 AI 视频平台架构,实现 X86/ARM 与 GPU/NPU 异构算力融合
人工智能·架构·音视频
ai产品老杨3 小时前
【深度架构解析】高并发 AI 视频管理平台:兼容 GB28181/RTSP,支持 X86/ARM+GPU/NPU 异构部署与源码交付
人工智能·架构·音视频
qq_546937273 小时前
完全免费的离线运行的本地音视频转字幕工具,支持一键音视频提取文字,可以导出多种格式!
音视频
AI服务老曹3 小时前
从GB28181接入到边缘NPU算力调度:深度解析支持异构计算的工业级AI视频管理平台架构
人工智能·架构·音视频
RTC老炮3 小时前
WebRTC下FlexFEC算法架构及原理
网络·算法·音视频·webrtc
VOOHU_201818 小时前
VOOHU沃虎:音频变压器的主要作用是什么?什么情况下必须使用?
网络·物联网·音视频·电子元器件
APIshop19 小时前
小红书笔记视频详情接口深度解析:smallredbook.item_get_video_pro
数据库·笔记·音视频