vue3 video自动播放带声音

在Vue3中，你可以使用`<video>`元素来嵌入视频，并使用`autoplay`属性来自动播放视频，使用`muted`属性来静音视频。以下是示例代码：

<template>
  <div>
    <video autoplay muted>
      <source src="your-video-source" type="video/mp4">
    </video>
  </div>
</template>

其中，`your-video-source`是你的视频文件路径。如果你想要控制视频的播放，你可以使用`v-bind`指令来绑定`paused`属性和`play()`方法。例如：

<template>
  <div>
    <video v-bind:paused="isPaused" ref="videoPlayer">
      <source src="your-video-source" type="video/mp4">
    </video>
    <button v-on:click="playVideo">Play</button>
    <button v-on:click="pauseVideo">Pause</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPaused: true,
    };
  },
  methods: {
    playVideo() {
      this.$refs.videoPlayer.play();
      this.isPaused = false;
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause();
      this.isPaused = true;
    },
  },
};
</script>

在这个例子中，我们使用了`ref`属性来引用`<video>`元素，并使用`play()`和`pause()`方法来控制视频的播放。`isPaused`属性用于判断视频是否处于暂停状态。