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;
    }
  }
相关推荐
美狐美颜SDK开放平台8 小时前
美颜SDK性能优化实战:GPU加速与AI人脸美型的融合开发
人工智能·音视频
卜锦元11 小时前
音视频媒体服务领域中三种架构方式的定义与区别(Mesh、MCU、SFU)
架构·音视频·媒体
EasyCVR11 小时前
打造景区“视觉中枢”:视频融合平台EasyCVR助力智慧景区安防智能化升级
音视频
TE-茶叶蛋11 小时前
Uniapp运行MuMu模拟器
uni-app
上大科技蔡生12 小时前
CS8389、CS8390:防破音,AB/D,2×6.6W立体音频功率放大器
音视频·音频功放
一人一程温一壶酒14 小时前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
githubcurry15 小时前
深度相机kinect拍摄的.mkv深度视频为什么特别大,mkv文件中含有什么数据,以及数据格式是什么
人工智能·数码相机·音视频
ACP广源盛1392462567315 小时前
GSV6127E#ACP#Type-C/DisplayPort 1.4/HDMI 2.0 到 MIPI CSI-2 混合转换器(带嵌入式 MCU)
单片机·嵌入式硬件·音视频
赖small强16 小时前
【ZeroRange WebRTC】Amazon Kinesis Video Streams WebRTC SDK 音视频传输技术分析
音视频·webrtc·nack·pli·twcc·带宽自适应
一个假的前端男16 小时前
uniapp 3端轮播
前端·javascript·uni-app