Vue入门攻略：轻松设置视频中的图片元素，提升播放体验

一、视频组件的基本设置

首先，我们需要在Vue项目中引入视频组件，比如<video>标签。以下是一个基本的视频组件示例：

<template>
  <div>
    <video ref="videoPlayer" width="0" controls>
      <source src="movie.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.videoPlayer.play();
  }
}
</script>

这里，我们创建了一个带有controls属性的<video>标签，它允许用户控制视频播放。ref="videoPlayer"用于后续的脚本操作。

二、插入图片元素

<template>
  <div>
    <video ref="videoPlayer" width="0" controls @timeupdate="handleTimeUpdate">
      <source src="movie.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video>
    <div v-if="showImage" class="overlay">
      <img :src="imageUrl" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }" alt="Image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: false,
      imageUrl: 'image.jpg',
      imageWidth: 100,
      imageHeight: 100
    }
  },
  methods: {
    handleTimeUpdate() {
      const currentTime = this.$refs.videoPlayer.currentTime;
      if (currentTime >= 10 && currentTime < 15) {
        this.showImage = true;
      } else {
        this.showImage = false;
      }
    }
  },
  mounted() {
    this.$refs.videoPlayer.play();
  }
}
</script>

<style>
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

三、总结