问题:

实现以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>
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐