vue3+vue3-video-play实现视频预览

问题：自带的video功能还是较少 vue3-video-play(^1.3.1-beta.6)这个组件我觉得功能还是挺多的

功能：设置里镜像/循环/关灯 还有画中画模式

// 这个就很简单了 看看就好
<template>
  <div>
    <el-form-item :label="obj.attr_label || ''" :prop="prop" :rules="rules" :label-width="obj.attr_labelWidth"
      :label-position="obj.labelPosition || ''" v-if="obj.is_show === 0 ? false : true">
      <el-upload class="upload-demo" :file-list="obj.attr_value" drag :action="uploadUrl" multiple
        :style="{ width: obj.attr_width || '60%' }" :before-upload="beforeUpload" :limit="obj.attr_limit"
        :on-exceed="handleExceed" :on-success="handleUploadSuccess" :accept="obj.attr_accept || typeList.join(',')"
        :auto-upload="true" v-loading="loading">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <template #file="{ file }">
          <div class="file-style" style="font-size: 18px">
            <div class="leftDoc">
              <el-tooltip class="item" effect="dark" :content="file.name || file.originalFileName" placement="top">
                <span>{{ file.name || file.originalFileName }}</span>
              </el-tooltip>
            </div>
            <div class="rightIcon">
              <el-icon>
                <Download @click="handleDown(file)" style="cursor: pointer;" />
              </el-icon>
              <el-icon style="margin: 0 16px;">
                <DeleteFilled @click="handleRemove(file)" style="cursor: pointer;" />
              </el-icon>
              <el-icon>
                <ZoomIn @click="handlePreview(file)" style="cursor: pointer;" />
              </el-icon>
            </div>
          </div>
        </template>
        <div class="el-upload__text">上传的视频不能超过<em>{{ maxUpload }}M</em></div>
      </el-upload>
    </el-form-item>
    <ac-dialog title="预览" width="840px" :isShowFooter="false" ref="videoPreviewRef">
      <vue3videoPlay width="800px" title="钢铁侠" :src="videoOptions.src" :poster="videoOptions.poster" @play="onPlay"
        @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
    </ac-dialog>
  </div>
</template>

<script lang="ts" setup>
import { baseURL } from '@/service/index';
import { handleDownloadUrl, handleFileDown } from '@/utils/downLoadFile';
import { Download, UploadFilled, ZoomIn } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import vue3videoPlay from 'vue3-video-play'; // 引入组件
import 'vue3-video-play/dist/style.css';
const props = defineProps({
  obj: {
    type: Object,
    default: () => ({}),
  },
  prop: {
    type: String,
    default: "",
  }
});
let { obj } = props;
const typeList = ['video/mp4', 'video/ogg']
const uploadUrl = computed(() => {
  return baseURL + '/minio/upload'
})
const maxUpload = 520
const fileLimit = props.obj.attr_limit ?? 9
const rules = [
  {
    required: obj.attr_isRequired === 1,
    validator: obj["validator"],
    trigger: "change",
  },
];
const loading = ref(false)
const handleUploadSuccess = (response) => {
  if (response.code === 200) {
    const data = response.data
    obj.attr_value.push({ ...data, url: data.address, name: data.originalFileName })
  } else {
    ElMessage.error(response.message)
  }
  loading.value = false
};
const videoOptions = reactive({
  src: "", //视频源
  poster: '', //封面
})
const videoPreviewRef = ref()
const handlePreview = (file) => {
  console.log(file);
  const url = handleDownloadUrl(file)
  if (url) {
    videoOptions.src = url
    videoPreviewRef.value.openModal()
  } else {
    ElMessage.warning('该网址有问题！')
  }
}

const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}

const handleDown = (file) => {
  handleFileDown(file)
}
const handleRemove = (uploadFile) => {
  console.log(toRaw(uploadFile));
  if (uploadFile.response && uploadFile.status === "success") {
    const address = uploadFile.response.data.address
    obj.attr_value = props.obj.attr_value.filter(i => i.address !== address)
  } else if (uploadFile.address) {
    obj.attr_value = props.obj.attr_value.filter(i => i.address !== uploadFile.address)
  }
};
const handleExceed = () => {
  ElMessage.warning(`上传的视频不能超过${fileLimit}个`);
};

const beforeUpload = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > maxUpload) {
    ElMessage.warning(`上传的视频文件不能超过${maxUpload}M`);
    return false;
  }
  loading.value = true
  return true;
};
onMounted(() => { });
</script>

<style scoped lang='scss'>
.file-style {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 18px;

  .leftDoc {
    flex: 1;
    margin-right: 10px;
  }

  .rightIcon {
    display: flex;
    width: 100px;
  }
}
</style>