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;
}
}