vue3中如何点击video标签可以播放视频再次点击暂停

在 Vue3 中，你可以使用 `v-on` 指令绑定点击事件，并结合 `v-model` 和 `pause()` 方法来控制视频的播放和暂停。首先，你需要安装 Element UI 的 `el-video` 组件，如果还没有的话。然后，在模板中，将视频元素添加到组件里并设置初始状态为暂停：

<template>
  <div>
    <el-video
      ref="video"
      v-model="playStatus"
      :src="videoUrl"
      controls
      @click.native="togglePlay"
    ></el-video>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElVideo } from 'element-plus';

const videoUrl = 'your_video_source_url'; // 替换为你的视频源 URL
const playStatus = ref(false); // 初始暂停状态

function togglePlay() {
  this.playStatus.value = !this.playStatus.value;
  if (this.playStatus.value) {
    this.$refs.video.play();
  } else {
    this.$refs.video.pause();
  }
}
</script>

在这个例子中，`v-model` 将 `playStatus` 的值映射到 `<el-video>` 的 `paused` 属性，当 `playStatus` 变化时，视频会相应地切换播放/暂停状态。点击视频时，`togglePlay` 函数会被触发，改变 `playStatus` 并调用视频的 `play()` 或 `pause()` 方法。