Vue登录主页动态背景短视频制作登录主页动态背景短视频制作
主要为大家详细介绍了Vue登录主页动态背景短视频的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以
参考一下
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
一、一、HTML代码代码
<source src="../assets/video/G1s.mp4" type="video/mp4"/>
注:src的路径根据自己的需要改变;
video标签无法自动播放 刷新后无法自动播放;
解决方法:给video标签添加muted属性,可写为muted或完整写法:muted=“muted”
<template>
<div class="homepage-hero-module">
<div class="video-container">
<div :style="fixStyle" class="filter">
<!--内容-->
</div>
<video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
<source src="../assets/video/G1s.mp4" type="video/mp4"/>
浏览器不支持 video 标签,建议升级浏览器。
<source src="../assets/video/G1w.webm" type="video/webm"/>
浏览器不支持 video 标签,建议升级浏览器。
</video>
<div class="poster hidden" v-if="!vedioCanPlay">
<img :style="fixStyle" src="../assets/video/G1.jpg" alt="">
</div>
</div>
</div>
</template>
二、二、css代码代码
<style scoped>
.homepage-hero-module,
.video-container {
position: relative;
height: 100vh;
overflow: hidden;
}
.video-container .poster img{
z-index: 0;
position: absolute;
}
.video-container .filter {
z-index: 1;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.fillWidth {
width: 100%;
}
</style>
三、三、JavaScript----代码代码
name: ' *** ' 自定义
export default {
name: 'Video',
data() {
return {
vedioCanPlay: false,
fixStyle: ''
}
},
methods: {
canplay() {
评论0