vuevlog录制视频不能全屏,怎么会突然成这样，卸载重装了一次也不行，求大神指点

发布网友发布时间：2022-04-29 21:42

共2个回答

热心网友时间：2023-10-09 10:39

可能程序不兼容，可以更换个版本试试。另外建议参考下程序对配置的要求。
或者右键需要运行的程序选择兼容性用兼容模式运行试试。

热心网友时间：2023-10-09 10:40

首先vue导入Vidage包
npm install vidage --save
在需要使用的页面导入
import Vidage from 'vidage'
加入样式
.Vidage__backdrop, .Vidage__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.Vidage--allow .Vidage__video {
display: block
}
.Vidage--allow .Vidage__image {
display: none
}
.Vidage {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1
}
.Vidage, .Vidage__video {
min-width: 100%;
min-height: 100%
}
.Vidage__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: none
}

.Vidage__image {
background-position: 50%;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover
}

.Vidage__backdrop {
background-color: #1b1c1d;
background-image: url(./pattern.svg);
opacity: .1
}
template中加入
<template>
<div class="login-container">
<div class="Vidage">
<div class="Vidage__image"></div>
<video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
<source src="XXXX.mp4" type="video/mp4">
</video>
<div class="Vidage__backdrop"></div>
</div>
最后
mounted() {
new Vidage('#VidageVideo')
}