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

使用 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 描述


效果

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

效果图

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


http://www.mrgr.cn/news/61817.html

相关文章:

  • Java 数据类型、变量和操作符(2/30)
  • 使用 Kafka 和 MinIO 实现人工智能数据工作流
  • 运维监控丨16条常用的Kafka看板监控配置与告警规则
  • 油猴脚本-GPT问题导航侧边栏增强版
  • 深入解析HTTP与HTTPS的区别及实现原理
  • 【Python Tips】列表去重——列表list数据预处理:嵌套列表去重
  • Java:数据结构-MapSet
  • Deep InfoMax(DIM)(2019-02-ICLR)
  • 7000元投影仪性价比哪款好?当贝F7 Pro脱颖而出
  • 浏览器本地存储和token封装和浏览器导航栏title的笔记
  • 【遗传算法】孤岛模式下的微电网优化调度模型
  • 将多个commit合并成一个commit并提交
  • 探访宇树科技的G1人形机器人:未来消费级机器人的先驱
  • 闲一品交易平台:SpringBoot技术的新境界
  • Win7如何安装支持asp+mdb程序,安装配置IIS
  • [实时计算flink]安全访问最佳实践
  • 新版达梦数据库查看数据库版本信息id_code无法直接显示版本号
  • NewStarCTF2024-Week4-Web-WP
  • 关于我、重生到500年前凭借C语言改变世界科技vlog.12——深入理解指针(2)
  • 【原创分享】详述中间件的前世今生
  • 北斗短报文终端-全星魅北斗手持终端-北斗有源终端
  • 提升RAG系统的回答质量:PDF解析代码详解-PdfParser核心流程
  • ELK之路第三步——日志收集筛选logstash和filebeat
  • Java Lock/AQS ReentrantLock 源码
  • 3DDFA-V3——基于人脸分割几何信息指导下的三维人脸重建
  • IP-guard与Ping32文档加密解决方案对比,选择适合自己的解决方案