uni-app使用video组件黑屏不显示画面的情况

于 2024-07-25 22:59:07 发布
阅读量672 收藏
点赞数 3
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51607771/article/details/140701806
版权

如果遇到在使用uni-app实现视频预览的情况时可能会遇到黑屏的情况，出现以下报错

Uncaught (in promise) DOMException: The element has no supported sources.

此时请查看是否是使用HBuilderX内置浏览器打开的

1. 如果是内置浏览器打开，切换外部浏览器打开即可

2. 如果外部浏览器也不能打开请检查你的url是否能够正常下载视频。

Uni-app官方真得长点心了。。。

qq_51607771
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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
uniapp(全端兼容) - 最新详细实现接入腾讯视频播放器功能插件，uniapp全平台端（小程序/H5网页/App/nvu）调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
高级前端工程师
05-15 7969
uniapp腾讯视频，uniapp微信小程序腾讯视频，uniapp小程序接入腾讯视频详细示例教程源码，uniapp怎么在微信小程序平台使用腾讯视频插件，在uni-app中使用腾讯视频插件播放视频，uniapp调用腾讯视频，uniapp引入腾讯视频插件，uniapp小程序中引入腾讯视频无法播放，uniapp微信小程序平台引入腾讯视频播放不了黑屏，在uniapp开发的微信小程序中使用腾讯视频，uniapp如何引入腾讯视频插件播放视频，uni-app小程序平台引入腾讯视频插件播放腾讯视频，uniapp 小程序接入
uniapp微信小程序video不显示，不生效
A1abcvbnm的博客
06-07 907
开发者工具video不显示，无法播放，也没有任何错误，就是不显示。
uni-app中的innerAudioContext在微信内置浏览器播放音频失败
任重道远
03-07 9208
我今天调试uni-app上的音频在h5上的播放，结果一直就出现一个很恶心的问题：在pc上的浏览器（谷歌、QQ浏览器）、微信开发者工具上，音频正常播放，但是在手机微信浏览器，点击播放毫无反应； 在HbuilderX上自带的web调试工具，得到两个报错： Uncaught (in promise) DOMException: The element has no supported sources. ...
uni-app中引入腾讯视频插件，播放腾讯视频
kouryoushine的博客
11-06 8030
配置微信小程序插件 注意事项 正式开始使用微信小程序插件之前需先在微信公众平台 -> 设置->第三方设置 -> 插件管理处添加插件 要保证项目内微信小程序appid和申请插件的微信小程序appid一致插件才可使用 引入插件代码包 使用插件之前开发者需要在manifest.json中的mp-weixin内声明使用的插件，具体配置参照所用插件的开发文档 /* 小程序特有相关 ...
uniapp开发h5端使用video播放mp4格式视频黑屏，但有音频播放解决方案
stars______的博客
04-10 2109
mp4格式视频有一些谷歌播放视频黑屏，搜狗浏览器可以正常播放。第二步：点击添加文件选择想要转换编码的mp4格式视频文件。第四步：视频编码选择为h264，然后点击右下角确定。完成后文件夹里就有转码成功后的视频文件了。第六步：此时已经有一条视频，点击开始。如果是自己手动上传文件可以手动转换。如果是后端上传就需要后端去转换。第三步：点击右上角输出配置。第五步：再点击右下角确定。
uniapp使用video标签无法播放视频出现黑屏问题处理
热门推荐
一个超爱喝可乐的web前端攻城狮
03-31 1万+
【代码】uniapp使用video标签无法播放视频出现黑屏问题处理。
uniapp -＞video 黑屏 无时长（新手容易遇到的坑）
妄梦久挽的博客
11-08 4851
注意注意 视频引入黑屏，不能看到时长的问题
uniapp video真机调试黑屏问题
YUE
04-10 1390
原理：关闭自定义缓存，解放vx原有缓存容量，使用系统缓存。添加custom-cache为false即可。
uniapp video视频铺满容器，不显示控件
hyx_1225的博客
07-06 452
object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖。enable-progress-gesture：是否开启控制进度的手势，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。2、其他地方用代码控制视频播放暂停。1、video标签的属性。
HTML5页面音视频在微信和app下自动播放的实现方法
09-28
在描述中提到，由于大部分移动端浏览器默认禁用了audio和video的autoplay功能，且对于用户没有进行任何交互操作的情况下的自动播放请求不予响应，开发者需要另辟蹊径来实现这一功能。文章提到的解决方案主要是通过...
uniapp [全端兼容] - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、摄像头控制，实时推流、回放、放大缩小画面、视频画面截图、截屏抓拍及播放器解决延迟教程
最新发布
王佳斌
07-18 5973
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，vue，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，无法连接，报错，uniApp对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，对接海康监控设备
uniapp -- 扫码记录（针对app场景）
老司机的后备箱
09-29 5524
自定义扫码的场景也是在市场上的需求占有一定的分量，例如快递员的快递app，经常一个页面嵌套一个半页的扫码框，扫完之后的内容load在下面，直接可视化观看！整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
uniapp video android真机中黑屏 只有声音没有画面
weixin_57286220的博客
03-23 7933
在使用uniapp的video组件的时候，遇到进入页面播放正常，但再次进入重新加载页面后，会出现黑屏但有声音的问题。 因为需求是要在离开页面后不再播放视频，所以这里在onShow时绑定视频组件，并开始播放： <video id="myVideo" :src="videosrc" object-fit="cover" :autoplay="true" loop="true" controls="false" custom-cache="false" enable-play-gesture="false"
uniapp-nvue打包后video不显示
程序员劝退师的博客
05-28 3268
在你看到这篇博文的时候，我们猜到，你肯定是发了好多安装包，一个一个的打包，安装，测试，C、C、C，既然还是不行！怀疑uniapp这玩意了！ 这个是实际开发中碰到的比较恶心的问题，刚开始本地调试没点问题，但是当我打完包线上运行时，nuve挂载的video标签死活不显示，这个坑要是小白来踩，估计真的就是uniapp入门到放弃！ 解决步骤 方案一 方案二 "runmode" : "liberate",在这里插入代码片 方案三 给video标签设置宽高 方案四 把方案一，方案二，方案三都加起来再试试！！！
Uniapp Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法
max12133的博客
07-09 8628
uniapp video mp4播放失败解决办法
uniapp写H5公众号使用video视频封面黑屏 ios第一次点击放大预览黑屏！！！！ios自动播放----------解决
weixin_69666355的博客
06-22 578
直接运行到外部浏览器中查看，发到线上H５一样可以播放　但是没有封面。2.如果uniapp内置浏览器播放黑屏(会有这样的情况无解)ios想要自动播放生效就必须静音。3.H5页面video没有封面。poster封面属性即可。
【解决】uniapp使用video标签在浏览器调试正常，安卓真机、手机上显示小黑块，无法正常显示
huangfuyk.的博客
08-24 4523
uniapp使用video标签播放视频
index.js:210 Uncaught (in promise) DOMException: The element has no supported sources.
06-11
在JavaScript中，当你遇到`index.js:210 Uncaught (in promise) DOMException: The element has no supported sources.` 这样的错误，通常是在处理HTML5媒体元素（如`<video>`或`<audio>`）时发生的。DOMException是DOM（Document Object Model）API抛出的一种异常，表明浏览器遇到了与DOM元素操作相关的错误。 具体到这个错误，错误信息说“元素没有支持的源”，这意味着你在尝试播放视频或音频时，指定的`src`（source）属性的URL不是一个浏览器支持的格式，或者是网络问题导致的资源无法加载，或者是元素的`type`属性设置不正确，使得浏览器无法识别为可播放的媒体类型。 解决这个问题，你可以做以下几个步骤： 1. **检查`src`和`type`**：确保视频或音频文件的URL是正确的，并且`type`属性指定了正确的MIME类型，例如对于MP4视频，可能是`type="video/mp4"`。 2. **测试媒体格式**：确认浏览器支持那种媒体格式，你可以查看MDN文档（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Supported_media_formats）来确认。 3. **跨域问题**：如果文件不在同一域下，检查是否设置了正确的CORS（Cross-Origin Resource Sharing）策略。 4. **网络状况**：确保你的用户有权限访问该资源，或者网络连接正常。 5. **代码审查**：检查`index.js:210`的具体上下文，看是否有其他可能影响媒体加载的代码逻辑。 如果你能提供更具体的上下文或代码片段，我可以给出更精确的帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值