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;
    }
  }
相关推荐
2501_915909064 分钟前
iOS 抓包不越狱,代理抓包 和 数据线直连抓包两种实现方式
android·ios·小程序·https·uni-app·iphone·webview
小仙女的小稀罕4 分钟前
专业音频工具排行 | 迅捷音频转文字介绍
音视频
Terasic友晶科技6 分钟前
2-DE10-Nano的HDMI音频传输案例——基于FPGA的I2S控制模块设计
fpga开发·音视频·i2s·de10-nano·hdmi音频传输
给钱,谢谢!21 分钟前
记录uni-app Vue3 慎用 Teleport,会导致页面栈混乱
前端·vue.js·uni-app
irpywp1 小时前
SentrySearch:一款支持用自然语言检索原生 MP4 视频的 Python 命令行工具
python·音视频·概率论
2301_764441332 小时前
Helios:14B实时长视频生成模型
人工智能·音视频
0xDevNull2 小时前
Java 视频在线播放功能案例
java·开发语言·音视频
EasyGBS2 小时前
国密GB35114协议+国标GB28181平台EasyGBS双重保障筑牢安防视频安全防线
安全·https·音视频
XiaoLeisj2 小时前
Android 媒体能力实战:从 Media3 音视频播放到 CameraX 拍照与视频录制
android·音视频·媒体·android jetpack
今夕资源网3 小时前
VSE硬字幕提取工具 Video subtitle extractor 视频生成srt字幕文件 含详细使用方法
音视频·视频生成字幕·视频生成srt·srt字幕文件·视频硬字幕提取·硬字幕提取·字幕文件提取