vue-files-preview/es/packages/preview/supports/video-preview/index.vue2.mjs.map

A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.

{"version":3,"file":"index.vue2.mjs","sources":["../../../../../../packages/preview/supports/video-preview/index.vue"],"sourcesContent":["<script lang='ts' setup>\nimport {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'\nimport type {PreviewProps} from '../../preview.interface'\nimport {getFileRenderByFile} from '../../utils/utils'\n\nconst props = withDefaults(\n    defineProps<PreviewProps>(),\n    {\n      url: () => null,\n      file: () => null,\n    },\n)\n\nconst fileRender = ref(null)\nwatch(\n    () => props.file,\n    (file) => {\n      if (file) {\n        fileRender.value && URL.revokeObjectURL(fileRender.value)\n        getFileRenderByFile(file).then((render) => {\n          fileRender.value = render\n          // 设置视频元素的src\n          videoPreviewRef.value.src = fileRender.value\n        })\n      }\n    },\n    {immediate: true},\n)\nconst videoPreviewRef = shallowRef(null)\nonMounted(() => {\n  // 监听视频元素的loadedmetadata事件，以便在视频加载完成后自动播放\n  videoPreviewRef.value.addEventListener('loadedmetadata', () => {\n    videoPreviewRef.value.play()\n  })\n})\n\nonBeforeUnmount(() => {\n  // 组件销毁时，释放视频元素的src\n  videoPreviewRef.value.pause()\n  if (props.file) {\n    URL.revokeObjectURL(fileRender.value)\n  }\n})\n</script>\n\n<template>\n  <div class=\"video-preview web-full-screen\">\n    <video ref=\"videoPreviewRef\" class=\"player-video-main\" controls autoplay/>\n  </div>\n</template>\n\n<style scoped lang='scss'>\n.web-full-screen {\n  z-index: 9999999;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw !important;\n  height: 100vh !important;\n  overflow: hidden; /* 隐藏溢出内容，保持全屏体验 */\n  background: rgba(0, 0, 0, 0.8); /* 背景色可提高视频对比度 */\n  display: flex; /* 使用 flexbox 来居中视频 */\n  align-items: center; /* 垂直居中 */\n  justify-content: center; /* 水平居中 */\n}\n\n.player-video-main {\n  width: 100%;\n  height: auto; /* 使视频保持宽高比 */\n  max-height: 100%; /* 限制最大高度以防溢出 */\n  object-fit: contain; /* 保持宽高比，可能会出现黑边 */\n  transition: .2s;\n}\n\n.player-video-main.video-mirror {\n  transform: rotateY(180deg);\n}\n</style>\n"],"names":["props","__props","fileRender","ref","watch","file","getFileRenderByFile","render","videoPreviewRef","shallowRef","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;AAKA,UAAMA,IAAQC,GAQRC,IAAaC,EAAI,IAAI;AAC3B,IAAAC;AAAA,MACI,MAAMJ,EAAM;AAAA,MACZ,CAACK,MAAS;AACR,QAAIA,MACFH,EAAW,SAAS,IAAI,gBAAgBA,EAAW,KAAK,GACxDI,EAAoBD,CAAI,EAAE,KAAK,CAACE,MAAW;AACzC,UAAAL,EAAW,QAAQK,GAEHC,EAAA,MAAM,MAAMN,EAAW;AAAA,QAAA,CACxC;AAAA,MAEL;AAAA,MACA,EAAC,WAAW,GAAI;AAAA,IAAA;AAEd,UAAAM,IAAkBC,EAAW,IAAI;AACvC,WAAAC,EAAU,MAAM;AAEE,MAAAF,EAAA,MAAM,iBAAiB,kBAAkB,MAAM;AAC7D,QAAAA,EAAgB,MAAM;MAAK,CAC5B;AAAA,IAAA,CACF,GAEDG,EAAgB,MAAM;AAEpB,MAAAH,EAAgB,MAAM,SAClBR,EAAM,QACJ,IAAA,gBAAgBE,EAAW,KAAK;AAAA,IACtC,CACD;;;;;;;;;;;"}