feat:视频查看

ZhangXianQiang

2024-07-03 9101b1d1345df16ceab4ac57fd452299a0a4c036

feat:视频查看

 components.d.ts

@@ -41,6 +41,7 @@
    PDFVIewer: typeof import('./src/components/PDFVIewer/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    VideoViewer: typeof import('./src/components/VideoViewer/index.vue')['default']
  }
  export interface ComponentCustomProperties {
    vLoading: typeof import('element-plus/es')['ElLoadingDirective']

 public/test.pdf

Binary files differ

 src/components/VideoViewer/index.vue

New file
@@ -0,0 +1,25 @@
<template>
  <div class="video-container">
    <div id="player"></div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import Player from 'xgplayer';

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  }
});

const player = ref(null);


</script>

<style lang="scss" scoped>

</style>

 src/main.js

@@ -3,6 +3,7 @@
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import 'xgplayer/dist/index.min.css'; // 引入西瓜视频样式
import router from '@/router/index.js';
import pinia from './store';
import VueUeditorWrap from 'vue-ueditor-wrap';

 src/views/folder/index.vue

@@ -52,7 +52,7 @@

    <!-- pdf查看 -->
    <div class="pdf-container" v-show="pdfViewer">
      <PDFViewer :pdfUrl="'/helloworld.pdf'"></PDFViewer>
      <PDFViewer :pdfUrl="'/test.pdf'"></PDFViewer>
      <div class="close-btn">
        <el-button type="danger" size="large" circle @click="closeViewer">
          <template #icon>
@@ -70,7 +70,10 @@
     </div>

     <!-- 视频查看 -->
     <div class="video-container">
      
     </div>

  </div>
</template>