初始化版本，引入智慧食堂模块，第三方模块

src/components/VideoPlayer/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <video-play
+            ref="playerRef"
+            v-bind="options"
+            :src="src"
+            @play="onPlay"
+            @pause="onPause"
+            @timeupdate="onTimeupdate"
+            @canplay="onCanplay"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, shallowRef } from 'vue'
+import 'vue3-video-play/dist/style.css'
+import VideoPlay from 'vue3-video-play'
+const props = defineProps({
+    src: {
+        type: String,
+        required: true
+    },
+    width: String,
+    height: String,
+    poster: String
+})
+
+const playerRef = shallowRef()
+const options = reactive({
+    color: 'var(--el-color-primary)', //主题色
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制器
+    title: '', //视频名称
+    poster: '', //封面
+    ...props
+})
+
+const play = () => {
+    playerRef.value.play()
+}
+
+const pause = () => {
+    playerRef.value.pause()
+}
+
+const onPlay = (event: any) => {
+    console.log(event, '播放')
+}
+const onPause = (event: any) => {
+    console.log(event, '暂停')
+}
+
+const onTimeupdate = (event: any) => {
+    console.log(event, '时间更新')
+}
+const onCanplay = (event: any) => {
+    console.log(event, '可以播放')
+}
+
+defineExpose({
+    play,
+    pause
+})
+</script>