企业制作小程序_Vue登录主页动态布景短视频制造

2021-01-07 11:05 jianzhan
Vue登录动态背景短视频制作     作者:`花花`   这篇文章主要为大家详细介绍了Vue登录动态背景短视频的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue制作登录动态背景短视频的具体代码,供大家参考,具体内容如下

一、HTML代码

 source src="../assets/video/G1s.mp4" type="video/mp4"/ 

注:src的路径根据自己的需要改变;

video标签无法自动播放 刷新后无法自动播放;

解决方法:给video标签添加muted属性,可写为muted或完整写法:muted=“muted”

 template 
 div 
 div 
 div : 
 !--内容-- 
 /div 
 video : autoplay loop muted 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 v-if="!vedioCanPlay" 
 img : 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.clientWidth
 const windowHeight = document.body.clientHeight
 const windowAspectRatio = windowHeight / windowWidth
 let videoWidth
 let videoHeight
 if (windowAspectRatio 0.5625) {
 videoWidth = windowWidth
 videoHeight = videoWidth * 0.5625
 this.fixStyle = {
 height: windowWidth * 0.5625 + 'px',
 width: windowWidth + 'px',
 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
 'margin-left': 'initial'
 } else {
 videoHeight = windowHeight
 videoWidth = videoHeight / 0.5625
 this.fixStyle = {
 height: windowHeight + 'px',
 width: windowHeight / 0.5625 + 'px',
 'margin-left': (windowWidth - videoWidth) / 2 + 'px',
 'margin-bottom': 'initial'
 window.onresize()
 }

四、效果演示

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

五、HTML版

视频呢下载和html版代码在官网最下方:p>