vue3判断视频是否正在播放

在 Vue3 中，判断视频是否正在播放通常需要通过 JavaScript 来操作 HTML5 的 `Video` 元素的 `played`、`paused` 或 `playing` 状态属性。下面是一个简单的示例：

<template>
  <div>
    <video ref="myVideo" @play="onPlay()" @pause="onPause()" @ended="onEnded"></video>
    <p>{{ isPlaying ? '视频正在播放' : '视频未播放' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
    };
  },
  methods: {
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    },
    onEnded() {
      // 视频结束后重置状态
      this.isPlaying = false;
    },
  },
};
</script>

在这个例子中，我们首先设置了 `isPlaying` 数据绑定到 `false`。然后通过监听 `play`、`pause` 和 `ended` 事件，当视频开始播放、暂停或结束时更新 `isPlaying` 的值。

你可以通过访问 `this.$refs.myVideo` 来获取到实际的 Video 对象，然后直接检查其 `played`, `paused`, 或 `playing` 属性来判断视频的状态。