vue3 如何使用video

在 Vue 3 中使用 `<video>` 元素（即 HTML5 的视频标签）非常简单。你可以按照以下步骤来实现：

1. 首先，在你的 Vue 组件中导入 `<video>` 标签：

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
  </div>
</template>

2. 在你的 Vue 组件的 `data` 属性中设置 `videoUrl` 的初始值，这是你要播放的视频文件的 URL：

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4'
    };
  }
};
</script>

3. 在 `mounted` 钩子函数中，获取 `<video>` 元素的引用，以便后续操作：

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

4. 如果你想在特定的事件中控制视频播放，例如点击按钮时播放视频，你可以在方法中调用 `<video>` 元素的相应方法。以下是一个简单的示例：

<template>
  <div>
    <v-btn @click="playVideo">播放视频</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    playVideo() {
      this.videoElement.play();
    }
  }
};
</script>

这样就可以在 Vue 3 中使用 `<video>` 元素播放视频了。你可以根据自己的需求添加更多功能，例如暂停、重播等等。