// 我已经写成组件,直接复制粘贴引用即可
参考地址:my-web
// imgOrVideo.vue
<template>
<div class="video-container">
<div
class="video-wrapper"
ref="videoWrapper"
@mouseenter="handleMouseEnter"
@mouseout="handleEnded"
>
<video
class="video"
id="videoComp"
:src="videoUrl"
ref="video"
autoplay
muted
v-if="showVideo && videoOrGif === 'video'"
loop
></video>
<img
class="poster"
ref="gif"
:src="gifUrl"
v-if="showVideo && videoOrGif === 'gif'"
/>
<img class="poster" ref="image" :src="imgUrl" v-if="!showVideo" />
</div>
</div>
</template>
<script>
export default {
props: {
videoUrl: {
type: String,
default: require("../../../public/img/imgOrVideo/doodles.mp4"),
},
imgUrl: {
type: String,
default: require("../../../public/img/imgOrVideo/blueBoy.jpeg"),
},
gifUrl: {
type: String,
default: require("../../../public/img/imgOrVideo/doodles.gif"),
},
videoOrGif: {
type: String,
default: "video",
},
},
data() {
return {
showVideo: false,
};
},
methods: {
handleMouseEnter() {
this.showVideo = true;
},
handleEnded() {
this.showVideo = false;
},
},
};
</script>
<style scoped>
.video-container {
position: relative;
width: 100%;
height: 100vh;
background-color: #eee;
overflow: hidden;
}
.video-wrapper {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.video {
width: 100%;
}
.poster {
width: 100%;
cursor: pointer;
}
</style>
// 使用
<template>
<div>
<imgOrVideo ref="imgOrVideo" videoOrGif="gif" />
</div>
</template>