Vue----登录主页动态背景短视频制作

一、HTML代码

注：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() {this.vedioCanPlay = true}},mounted: function() {   //屏幕自适应window.onresize = () => {const windowWidth = document.body.clientWidthconst windowHeight = document.body.clientHeightconst windowAspectRatio = windowHeight / windowWidthlet videoWidthlet videoHeightif (windowAspectRatio < 0.5625) {videoWidth = windowWidthvideoHeight = videoWidth * 0.5625this.fixStyle = {height: windowWidth * 0.5625 + 'px',width: windowWidth + 'px','margin-bottom': (windowHeight - videoHeight) / 2 + 'px','margin-left': 'initial'}} else {videoHeight = windowHeightvideoWidth = videoHeight / 0.5625this.fixStyle = {height: windowHeight + 'px',width: windowHeight / 0.5625 + 'px','margin-left': (windowWidth - videoWidth) / 2 + 'px','margin-bottom': 'initial'}}}window.onresize()}}

四、效果演示

由于上传大小限制，只能剪短的gif动画了。

五、HTML版

视频呢下载和html版代码在官网最下方：https://coverr.co

Vue----登录主页动态背景短视频制作相关推荐

原创安卓手机QQ7.0登录界面动态背景视频实现方案
qq7.0登录界面动态背景实现 qq7.0登录界面动态视频背景实现 android动态视频背景 android动态背景分析qq7.0: 视频在打开登录界面就开始播放了,而且期间无黑屏而且是循环播 ...
苹果vs剪辑下载_好用的短视频制作与剪辑APP工具盘点
哈喽各位小伙伴儿~ 小漫已经太久没有更新啦,今天带给大家满满的干活哦~准备接招吧! 在移动化.碎片化消费日益盛行的当下,短视频成了最能反映年轻人生活方式的载体,在留存用户目光的道路上一骑绝尘.这点从抖 ...
AI短视频制作软件功能详解
AI视频智能制作软件提供了一种全新的视频制作方式,为广大用户提供了方便快捷的视频制作解决方案.对于那些缺乏制作技术和经验的新手用户来说,这个工具可以让他们更加轻松地制作出自己喜欢的短视频作品,也为那些 ...
学习短视频制作能做什么工作啊
在这个巨变时代, 选择比努力更重要,没有眼光的人,都是出色的完成了不该做的事情! 任何事情不是你付出多少辛苦和努力就能收获最大! 看你是否站在了风口,找对了方向. 从过去的很多社交工具,到现在一个视频 ...
强大的装逼,表白,炫富,恶搞短视频制作神器微信小程序源码支持多种流量主
大家好给大家带来一款强大的微信小程序源码该源码是属于制作短视频类型的支持一键制作成各种短视频,比如装逼,表白,炫富,恶搞-..等等里面拥有各种各样的模板,和抖音一键制作视频一个道理另外里面小编 ...
短视频制作小技巧，配音字幕都要跟上，做好细节才能成功
短视频制作小技巧,配音字幕都要跟上,做好细节才能成功短视频的大概制作方法相信大家都是心知肚明的,但是如果想要做好一个可以细分引流的短视频,却并不容易.那么今天我们就来分享几个短视频制作的小技巧,配音 ...
短视频制作教程获得流量的技巧有哪些
短视频制作教程获得流量的技巧有哪些?短视频上下滑流量获取入口第二个很少人用(建议收藏)#电商运营#淘宝#电商创业#电商干货视频巧妙的应用,拐点就能突破百万流量大关? 什么是拐点? 拐点就是指故事情 ...
湖北简智音：带你走进抖音短视频制作全过程
短视频如今在各种场所以及企业中得到重用,也在无声无息中成为我们生活的一部分.尤其对于抖音来讲,我们每天更新并创作不同形式的短视频,但并没有深入了解过短视频究竟整套流程是如何完成的,只有清楚短视频制作过 ...
实用软件分享|盘点那些你不知道的，超好用配音神器，短视频制作必备
今天来给大家盘点一下那些,超级实用,免费制作,绝不胡乱收费的,短视频旁白制作.街边小摊叫卖.超市促销活动的必备神器!!!AI配音工具! 今天推荐的几款配音工具,你完全不用担心AI配音的机器音重,断句生 ...

Vue----登录主页动态背景短视频制作

Vue----登录主页动态背景短视频制作相关推荐

最新文章

热门文章