Uniapp移动端:1,实现:视频作为背景
实现以mp4视频为背景。
·
问题:
实现以mp4视频为背景

资源加载 :
- 区分本地资源和远程资源的加载方式
- 本地资源使用 require() 或 import ,远程资源直接使用 URL
<template>
<view class="container">
<video :src="url"
autoplay loop
:muted="false"
object-fit="cover"
:controls="isshow"
class="video-bg">
</video>
</view>
</template>
<script>
export default{
data(){
return{
url:"https://fanyunbook.oss-cn-hangzhou.aliyuncs.com/xcx/video/home_bg.mp4",
isshow:false,
};
}
}
</script>
<style>
.container{
min-height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
}
.video-bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: contain; //确保视频内容铺满容器
z-index: -1;
}
</style>
更多推荐
所有评论(0)