feat:视频浏览

ZhangXianQiang

2024-07-05 98f494cf633e3acf5c20f3e9de0d708f2a6c2045

 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>