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;
    }
  }
相关推荐
Marry1.03 分钟前
uniapp背景图用本地图片
前端·uni-app
蜕变菜鸟9 分钟前
uni-app 实现自定义底部导航
uni-app·notepad++
安步当歌18 分钟前
【WebRTC】视频编码链路中各个类的简单分析——VideoEncoder
音视频·webrtc·视频编解码·video-codec
瑶琴AI前端2 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
hunandede3 小时前
FFmpeg 4.3 音视频-多路H265监控录放C++开发十三:将AVFrame转换成AVPacket。视频编码,AVPacket 重要函数,结构体成员学习
c++·ffmpeg·音视频
橘子味的茶二3 小时前
SDL读取PCM音频
ffmpeg·音视频·pcm
耶啵奶膘8 小时前
uniapp-是否删除
linux·前端·uni-app
断墨先生14 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
MediaTea14 小时前
Pr 视频过渡:沉浸式视频 - VR 色度泄漏
音视频·vr
LNTON羚通14 小时前
算法定制LiteAIServer摄像机实时接入分析平台烟火检测算法的主要功能
音视频·视频监控