更新记录

1.0.0（2024-09-13）

更新video组件显示圆角

平台兼容性

警告

解决app端，video组件无法圆角问题

容器大小需要指定、视频大小需要与容器大小一致，视频圆角组件大小需要与视频大小一致、三者大小保持一致

若宽高大小不确定，使用屏幕百分比

页面背景不支持渐变色，只支持单色系

原理：使用border边框和四个色块放置在四个角落

vue页面使用

<!-- 容器大小 -->
<!-- 容器设定relative -->
<view style="position: relative;" :style="{width:hp1option.width+'rpx',height:hp1option.height+'rpx'}">
    <!-- 横屏视频 -->
    <video src="@/static/video/6813515-sd_426_240_24fps.mp4" :controls="false" autoplay loop muted
        :style="{width:hp1option.width+'rpx',height:hp1option.height+'rpx'}"></video>
    <!-- 视频圆角组件 -->
    <!-- 组件基于absolute进行定位 -->
    <sjy-vidbr :option="hp1option" bColor="#ffffff"></sjy-vidbr>
</view>

<script>
    export default {
        data() {
            return {
                hp1option: {
                    width: 426 * 1.5,
                    height: 240 * 1.5,
                },
                hp2option: {
                    width: 240 * 1.5,
                    height: 426 * 1.5,
                }
            }
        },
    }
</script>

nvue页面使用

视频圆角组件外需要套一层view，指定position为absolute

<!-- 容器大小 -->
<!-- 容器设定relative -->
<view style="position: relative;" :style="{width:hp1option.width+'rpx',height:hp1option.height+'rpx'}">
<!-- 横屏视频 -->
<video :src="'/static/video/6813515-sd_426_240_24fps.mp4'" :controls="false" autoplay loop muted
style="height: 240rpx;width: 426rpx;"
:style="{width:hp1option.width+'rpx',height:hp1option.height+'rpx'}"></video>
<!-- 视频圆角组件 -->
<!-- nvue中需要外层套一层view，指定position为absolute -->
<view style="position: absolute;top: 0;">
<sjy-vidbr :option="hp1option" bColor="#ffffff" :bWidth="5"></sjy-vidbr>
</view>
</view>

<script>
export default {
data() {
return {
hp1option: {
width: 426 * 1.5,
height: 240 * 1.5,
},
hp2option: {
width: 240 * 1.5,
height: 426 * 1.5,
}
}
},
}
</script>