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

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

参考地址：my-web

// imgOrVideo.vue

 
<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>

// 使用