feat:视频浏览

ZhangXianQiang

2024-07-05 98f494cf633e3acf5c20f3e9de0d708f2a6c2045

feat:视频浏览

 public/test.mp4

Binary files differ

 src/components/VideoViewer/index.vue

@@ -1,25 +1,53 @@
<template>
  <div class="video-container">
    <div id="player"></div>
    <div class="video-content">
      <video :src="props.videoUrl" class="video-player" controls ref="player"></video>
    </div>
  </div>
</template>

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

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

const player = ref(null);


onMounted(() => {
});

onBeforeUnmount(() => {
  player.value.pause();
});

</script>

<style lang="scss" scoped>
.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba($color: #000000, $alpha: 0.5);
  .video-content {
    width: 70%;
    height: 800px;
  }
}

.video-player {
  width: 100%;
  height: 100%;
}
</style>

 src/views/exam-list/index.vue

@@ -32,7 +32,11 @@
              </div>

              <div class="card-footer flex justify-center mb-7 shrink-0">
                <el-pagination background layout="prev, pager, next" :total="1000" />
                <el-pagination background layout="prev, pager, next" :total="dataList.length"
                :default-page-size="20"
                :currentPage="currentIndex"
                :hide-on-single-page="true"
                @current-change="handleCurrentChange"/>
              </div>
            </div>
          </el-card>
@@ -78,6 +82,10 @@

const handleClick = (tab, event) => {
};

const handleCurrentChange = (val) => {
  getData();
}
</script>

<style lang="scss" scoped>

 src/views/folder/index.vue

@@ -74,8 +74,17 @@
    </div>

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

    <div class="video-container" v-show="videoViewer">
      <VideoViewer :videoUrl="videoUrl"></VideoViewer>
      <div class="close-btn">
        <el-button type="danger" size="large" circle @click="closeViewer">
          <template #icon>
            <el-icon :size="20">
              <Close />
            </el-icon>
          </template>
        </el-button>
      </div>
    </div>

  </div>
@@ -90,6 +99,8 @@
import { getFileList } from '@/api/modules/file.js';

import PDFViewer from '@/components/PDFViewer/index.vue';
import VideoViewer from '@/components/VideoViewer/index.vue';

import { useUserStore } from '@/store/index.js';
import useWebScoket from '@/hooks/useWebScoket.js';

@@ -117,6 +128,8 @@
    iconPath: '/static/icons/file_type_video.png',
    handle: (item) => {
      console.log(item);
      videoViewer.value = true;
      videoUrl.value = [item.contentUrl.url];
      resendMessage();
    }
  },
@@ -140,6 +153,7 @@

const imageList = ref([]);
const pdfFile = ref('');
const videoUrl = ref('');

const fileList = ref([]);

@@ -241,4 +255,27 @@
    }
  }
}

.video-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .close-btn {
    position: absolute;
    top: 60px;
    right: 100px;
    z-index: 9999999;

    :deep(.el-button) {
      width: fit-content;
      height: fit-content;
      padding: 10px !important;
    }
  }
}
</style>