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

环境

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>

场景用的控件比较少，也没有用到事件。有需要的建议看官方文档的 示例 和 Props 描述

效果

最终效果比较理想，比原生的好，如果单纯做展示够用了

谢谢观看，有问题评论区讨论