uniapp-nvue打包后video不显示

最新推荐文章于 2024-07-25 22:59:07 发布
置顶 最新推荐文章于 2024-07-25 22:59:07 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： # UNIAPP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN877425287/article/details/106394829
版权

在你看到这篇博文的时候，我们猜到，你肯定是发了好多安装包，一个一个的打包，安装，测试，C、C、C，既然还是不行！怀疑uniapp这玩意了！
这个是实际开发中碰到的比较恶心的问题，刚开始本地调试没点问题，但是当我打完包线上运行时，nuve挂载的video标签死活不显示，这个坑要是小白来踩，估计真的就是uniapp入门到放弃！

解决步骤

方案一
在这里插入图片描述
方案二
在这里插入图片描述

 "runmode" : "liberate",在这里插入代码片

方案三
给video标签设置宽高

方案四
把方案一，方案二，方案三都加起来再试试！！！

程序员劝退师-TAO
关注
专栏目录
uniapp - 视频播放器插件，支持播放m3u8 / flv / mp4视频流等各种格式的视频文件，附带全屏播放、播放快进、循环播放、音量调节、视频解码等功能（详细示例代码，一键复制开箱即用！）
高级前端工程师
08-02 8403
uniapp小程序h5网页app安卓苹果平台视频播放器，uniapp中如何使用视频播放器组件,uniapp使用mui-player插件详细教程，uniapp微信小程序接入视频播放器功能插件，uniapp播放m3u8 / flv / mp4视频流，uniapp怎么播放m3u8格式的视频，uniapp如何播放flv视频流文件，uniapp怎么播放m3u8 / flv视频流文件，uniapp m3u8格式视频，uniapp 使用 mui-player 插件播放 m3u8/flv 视频流，uniapp网页h5端播放
uniapp使用video标签无法播放视频出现黑屏问题处理
热门推荐
一个超爱喝可乐的web前端攻城狮
03-31 1万+
【代码】uniapp使用video标签无法播放视频出现黑屏问题处理。
Electron Vue 打包后视频无法播放
Mystery2020的博客
09-28 1869
Electron Vue 打包后视频无法播放
uni-app使用video组件黑屏不显示画面的情况
最新发布
qq_51607771的博客
07-25 812
如果遇到在使用uni-app实现视频预览的情况时可能会遇到黑屏的情况，出现以下报错。2. 如果外部浏览器也不能打开请检查你的url是否能够正常下载视频。此时请查看是否是使用HBuilderX内置浏览器打开的。1. 如果是内置浏览器打开，切换外部浏览器打开即可。Uni-app官方真得长点心了。
uniapp离线打包无法播放本地视频
记录
10-21 1559
uniapp离线打包无法播放本地视频，使用hbuild运行到手机可以正常播放。使用AndroidStudio查看控制台发现操作文件的类有方法丢失。 原因：导入在AndroidStudio的arr依赖版本和hbuild版本不一直。将hbuild升级最新版本，arr依赖也下载最新版本。两者版本保持一致即可成功。 ...
uniapp video视频铺满容器，不显示控件
hyx_1225的博客
07-06 507
object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖。enable-progress-gesture：是否开启控制进度的手势，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。2、其他地方用代码控制视频播放暂停。1、video标签的属性。
uniapp -- 扫码记录（针对app场景）
老司机的后备箱
09-29 5540
自定义扫码的场景也是在市场上的需求占有一定的分量，例如快递员的快递app，经常一个页面嵌套一个半页的扫码框，扫完之后的内容load在下面，直接可视化观看！整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
uniapp subNvue 写的视频播放
11-03
在uniapp项目中，我们首先需要创建一个subNvue文件，通常命名为`video-player.vue`。在这个文件中，我们可以编写专门处理视频播放的代码，包括视频源的加载、控制栏的布局、播放状态的管理等。 3. **视频播放器...
vue整合uniapp_Hybrid APP开发实战（三）：uni-app中的nvue
weixin_34622572的博客
01-14 3750
​关注公众号前端小白菜，更多前端小干货等着你喔！公众号会不定期分享前端技术，每天进步一点点，与大家相伴成长uni-app App端内置了一个基于weex的原生渲染引擎，提供了原生的渲染能力。​想用JavaScript开发中原生的组件能力，前端有两种选择weex和react-native，两个框架分别依托于vue与react。weex依托于vue，与uni-app的设计理念一致，故而也是uni-ap...
uniappNvueVideo：这是开源的nvue视频项目
02-15
uniappNvueVideo：这是开源的nvue视频项目
uniapp - 实现手机端H5网页直播功能效果，拿到后端推流地址或播放资源后进行前端的流畅播放和画面展示功能，uniapp实时推流/拉流直播系统详细教程（提供完整示例代码，一键复制开箱即用！）
高级前端工程师
12-28 4557
uniapp，h5网页，手机端H5网页，uniapp h5直播功能页面，uniapp直播实时推送显示，uniapp h5直播怎么做，怎么使用uniapp去实现移动端手机H5直播，h5 vue+uniapp怎么做直播，uniapp中使用videojs构建H5直播播放器，uniappH5端怎么实现直播推流，uniapp如何实现直播，直播聊天功能，h5平台端直播用什么插件，uniapp手机网页直播用什么组件插件播放器，uniapp手机H5直播播放器详细教程，直播项目，怎么使用vue+uniapp怎么做H5实时直播
uniapp，video视频播放不了，页面显示不完整
weixin_46715876的博客
10-12 5298
video播放不了，为界面全黑，此时切换为浏览器运行即可播放 视频播放时显示不完整，在App.vue中添加以下代码可解决 html,body{ height: 100%; width: 100%; } page { height: 100%; } 是uni-page-body没有设置height:100% ...
uniapp项目提示打包时未添加videoplayer模块
Rudon滨海渔村的博客
03-08 5231
主要步骤 修改/manifest.json的"APP模块设置"，勾选”VideoPlayer(视频播放)“ 下载两个文件到项目根目录/libs/下，包括weex_videoplayer-release.aar 172KBmedia-release.aar 11443KB 文件在以下网盘的Android 离线SDK - 正式版>要求HBuilderX3.3.11.20220209>Android-SDK@3.3.11.81232_20220210> SDK > l...
uniapp 打包后 vido标签内的视频安卓能播放 ios不能播放
xiakekeali的博客
11-27 4522
关于这个问题纠结了一下午，终于做好了东西，本地运行到安卓ios都能正常显示播放，没有任何问题，结果通过云打包之后，ios内的video标签里面的监控不能播放，各种测试之后发现，是因为uniapp的版本问题，把版本升级到当前最新版本(2.4.2)，打包后果然能正常运行查看了，希望我淌过的坑其他小白不要在淌，纠结了一下午，最后出来的时候差点哭出了声音o(╥﹏╥)o ...
uniapp - 使用 ＜video＞ 播放视频黑屏，浏览器控制台报错： DOMException: The element has on supported sources.（详细完美解决方案）
高级前端工程师
04-13 1万+
uniapp video 视频播放黑屏，uniapp 报错DOMException: The element has on supported sources.，uniapp如何解决DOMException: The element has on supported sources.，uniapp使用video标签无法播放视频出现黑屏问题处理，uniapp解决video视频黑屏显示0秒，并且浏览器报错DOMException: The element has on supported sources.，un
uni-app 组件video显示视频缩略图
码农要自强
04-13 3254
uni-app video 组件显示视频缩略图
uniapp 播放视频
thingir的博客
04-15 9706
uniapp 小程序视频封面点击全屏播放视频
在uniapp中nvue页面const video = uni.createVideoContext('myVideo') video.drawCanvas({没有video.drawCanvas(这个方法怎办
06-11
如果在uniapp中的nvue页面中使用 `uni.createVideoContext('myVideo')` 创建视频上下文对象时，发现没有 `video.drawCanvas()` 方法，可以考虑使用 `uni.createSelectorQuery()` 方法来获取视频组件的实例，然后通过 `wx.createCanvasContext()` 方法来创建画布上下文对象，最后使用 `canvasContext.drawImage()` 方法将视频组件的画面绘制到画布上，从而实现视频画面的截取和绘制。具体的代码实现可以参考如下示例： ```js // 获取视频组件的选择器 const videoQuery = uni.createSelectorQuery().in(this).select('#myVideo'); // 获取画布上下文对象 const canvasContext = wx.createCanvasContext('myCanvas'); // 使用视频组件的画面截取和绘制方法 videoQuery.fields({ node: true, size: true }).exec((res) => { const video = res[0].node; const width = res[0].width; const height = res[0].height; canvasContext.drawImage(video, 0, 0, width, height); canvasContext.draw(); }); ``` 需要注意的是，该方法仅适用于在微信小程序中，不适用于在其他平台或环境中。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员劝退师-TAO

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值