vue实现鼠标移入图片播放视频

 // 我已经写成组件，直接复制粘贴引用即可 

参考地址：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>