当前位置：首页 > news >正文

使用 vue3-video-play 视频播放组件过程中遇到的问题

news 2024/10/30 14:56:44

环境

Vue3、soybean admin: “1.0.0”（native-ui: “2.38.0”）、pnpm: “8.5.3”、vue3-video-play: “1.3.1-beta.6”

描述

后台管理系统的工单详情需要实现视频播放的功能

实现

使用 vue3-video-play 组件库，原生video标签的功能过少，样式简陋

问题

下载依赖并引用依赖过程中遇到了问题：Failed to resolve entry for package “vue3-video-play”. The package may have incorrect main/module/exports specified in its package.json.

解决

先是去翻了 issue ，有人提了，但是作者没有解决问题

然后网上查了，有些方案是改node modules脚本的，不太适合

最后翻到一条博客

vue3-video-play 实现视频播放

完整步骤如下：

一、安装依赖

pnpm install vue3-video-play@1.3.1-beta.6 --save

安装成功后 pnpm-lock.yaml、package.json会有变更。

二、组件内使用

喜欢全局的可以在main.ts里面引入

<script setup lang="ts">
import "vue3-video-play/dist/style.css";
import { videoPlay as Vue3VideoPlay } from "vue3-video-play"; // 改个别名let videoList = ref<object[]>([])</script><template><div><NDescriptionsItem label="产品视频" :span="2"><NSpace><div class="inline-flex justify-center items-center flex-col" v-for="item in videoList"><Vue3VideoPlay width='400px' height="220px" :speed="false" color="#5486AB":controlBtns="['speedRate', 'volume', 'pageFullScreen', 'fullScreen']" :src="item.url" /></div></NSpace></NDescriptionsItem></div>
</template><style scoped></style>