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;
    }
  }
相关推荐
唯创知音5 小时前
WT2605A录音方案实现高保真音频采集本地存储云端同步!
网络·音视频·录音芯片·录音方案·录音上传
ACP广源盛139246256735 小时前
GSV6155@ACP#6155产品规格详解及产品应用分享
嵌入式硬件·计算机外设·音视频
我是Feri8 小时前
HarmonyOS 6.0 视频播放组件使用教程
华为·音视频·harmonyos
2501_915909069 小时前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
音视频牛哥10 小时前
从“十五五”到数字化转型:音视频技术在未来产业中的关键作用
人工智能·深度学习·计算机视觉·音视频·十五五规划音视频低延迟方案·十五五规划低空经济低延迟方案·rtsp rtmp播放器
IT·小灰灰11 小时前
AI学会理解物理法则:OpenAI Sora 2如何重塑视频生成新范式
人工智能·python·深度学习·机器学习·数据挖掘·音视频
郑州光合科技余经理11 小时前
技术视角:海外版一站式同城生活服务平台源码解析
java·开发语言·uni-app·php·排序算法·objective-c·生活
QT 小鲜肉12 小时前
【孙子兵法之终篇】《孙子兵法》真人阅读、朗读、讲解的视频链接
网络·笔记·音视频·读书·孙子兵法
路溪非溪13 小时前
音频相关基础知识2
音视频
wangdaoyin201013 小时前
UniApp中使用LivePlayer进行视频或在流媒体播放
uni-app·liveplayer·h5播放视频