videoPlay播放视频

方式1：

vue3调用videoPlay，在Dialog 中播放视频，在option中可以设置播放器属性，其中src为视频路径

<template>
  <Dialog :title="dialogTitle" v-model="dialogVideoVisible">
    <div class="video-container">
      <videoPlay ref="aplayVideo" v-bind="options" @play="onPlay" />
    </div>
  </Dialog>
</template>

<script setup>
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
//播放器
const options = reactive({
  width: '100%', //播放器高度
  height: '100%', //播放器高度
  color: '#409eff', //主题色
  title: '', //视频名称
  webFullScreen: false, //网页全屏
  speed: true, //是否支持快进快退
  currentTime: 0, //跳转到固定播放时间(s)
  muted: false, //静音
  autoPlay: true, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  control: true, //是否显示控制器
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量0-1
  src: '', //视频源
  poster: '', //封面
  speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
  controlBtns: [
    'audioTrack', //音轨切换按钮
    'quality', //视频质量切换按钮
    'speedRate', //速率切换按钮
    'volume', //音量
    'setting', //设置
    'pip', //画中画按钮
    'pageFullScreen', //网页全屏按钮
    'fullScreen' //全屏按钮
  ] //显示所有按钮
})

方式2：

使用video在同一个页面，播放多个视频列表

<template>
  <div class="grid-container">
    <div v-for="video in videos" :key="video.id" class="grid-item">
      <video :src="video.url" controls loop autoPlay muted></video>
      <p>{{ video.title }}</p>
    </div>
  </div>
</template>

<script setup>
const videos = [
  { id: 1, url: '/static-video/test1.mp4', title: '测试1' },
  { id: 2, url: '/static-video/test2.mp4', title: '测试2' },
  { id: 3, url: '/static-video/test3.mp4', title: '测试3' },
  { id: 4, url: '/static-video/test4.mp4', title: '测试4' },
  { id: 5, url: '/static-video/test5.mp4', title: '测试5' },
  { id: 6, url: '/static-video/test6.mp4', title: '测试6' }
]
</script>
<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行4个格子 */
  grid-gap: 5px; /* 格子之间的间隔 */
}

.grid-item {
  width: 100%;
}
p {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
</style>