<template>
<view class="index">
<uv-navbar
leftIconSize="36"
title="帮助视频"
:placeholder="true"
:autoBack="true"
border
></uv-navbar>
<view class="content flex">
<view class="item" v-for="(item, index) in videoList" :index="index">
<view class="videoItem">
<video :src="item.url" object-fit="fill"></video>
</view>
<view class="text">{{ item.title }}</view>
</view>
</view>
</view>
</template>
<script setup>
const videoList = ref([
{
title: '线上商城',
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
}
]);
</script>
<style lang="scss" scoped>
.index {
.content {
padding: 24rpx;
flex-wrap: wrap;
.item {
margin-bottom: 20rpx;
.videoItem {
width: 336rpx;
height: 200rpx;
border-radius: 24rpx;
overflow: hidden;
uni-video {
width: 100%;
height: 100%;
:deep(.uni-video-cover) {
.uni-video-cover-play-button {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-size: 40%;
background-position: 60% 50%;
background-color: rgba(0, 0, 0, 0.5);
}
.uni-video-cover-duration {
display: none;
}
}
}
}
.text {
margin-top: 8rpx;
text-align: center;
}
}
}
}
</style>
在浏览器效果为:

在app效果为:
各位大佬,想实现的效果是在app中显示浏览器的效果