uniapp - 使用 ＜video＞ 播放视频黑屏，浏览器控制台报错： DOMException: The element has on supported sources.（详细完美解决方案）

已于 2025-01-15 16:50:42 修改
阅读量6.7k 收藏 3
点赞数 15
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 uniapp常见问题解决 文章标签： video The element has on supported sources uniapp 播放视频黑屏 uniapp视频控件报错黑屏 浏览器报错视频无法播放
于 2024-10-24 10:28:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/143201917
版权

问题描述

我是uniapp全平台开发（H5 / App / 小程序），突然遇到了使用 video 标签无法播放视频的问题，直接黑屏！

并且浏览器报错：Uncaught (in promise) DOMException: The element has on supported sources.

uniapp Vue3和Vue2都能用，提供详细示例解决代码。

在这里插入图片描述

在这里插入图片描述

解决方案

问题出现的原因

了解本专栏 订阅专栏 解锁全文
uniapp微信小程序 video 视频标签部分真机播放视频出现黑屏问题解决方案
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-01 2046
uniapp 微信小程序 `video` 视频标签部分真机播放视频出现黑屏问题解决方案 小程序video播放不了黑屏 只有声音没有图像怎么办 解决方法 uniapp的video视频标签播放不了
填坑——audio不能正常播放，控制台报错 Uncaught (in promise) DOMException
anbinmei9074的博客
09-06 1387
原文：https://blog.csdn.net/Mariosss/article/details/8786...
微信小程序video视频无法播放，审查元素没有src
最新发布
qq_42647677的博客
04-25 200
项目中之前的视频播放功能是好的，但是突然视频播放不了，原因竟然是因为小程序发布的基础库有问题，只有 3.2.5以下可以看到视频，好坑。设置成3.2.5版本以下后问题解决。
uniapp开发h5端使用video播放mp4格式视频黑屏，但有音频播放解决方案
stars______的博客
04-10 2846
mp4格式视频有一些谷歌播放视频黑屏，搜狗浏览器可以正常播放。第二步：点击添加文件选择想要转换编码的mp4格式视频文件。第四步：视频编码选择为h264，然后点击右下角确定。完成后文件夹里就有转码成功后的视频文件了。第六步：此时已经有一条视频，点击开始。如果是自己手动上传文件可以手动转换。如果是后端上传就需要后端去转换。第三步：点击右上角输出配置。第五步：再点击右下角确定。
uni-app使用video组件黑屏不显示画面的情况
qq_51607771的博客
07-25 2118
如果遇到在使用uni-app实现视频预览的情况时可能会遇到黑屏的情况，出现以下报错。2. 如果外部浏览器也不能打开请检查你的url是否能够正常下载视频。此时请查看是否是使用HBuilderX内置浏览器打开的。1. 如果是内置浏览器打开，切换外部浏览器打开即可。Uni-app官方真得长点心了。
uniapp使用video标签无法播放视频出现黑屏问题处理
一个超爱喝可乐的web前端攻城狮
03-31 1万+
【代码】uniapp使用video标签无法播放视频出现黑屏问题处理。
Uniapp Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法
max12133的博客
07-09 9505
uniapp video mp4播放失败解决办法
uniapp安卓开发报错：reportJSException ＞＞＞＞ exception function:createInstanceContext, exception:white screen
**My Coding Family**
09-16 2118
这个问题通常与JavaScript代码对DOM元素的访问有关，可能是尝试访问一个未初始化的DOM元素的parentNode。通过逐步排查和使用调试工具，应该可以找到并修复这个问题。如果你能提供更多关于具体代码片段的信息，我可以帮助你更详细地排查问题。希望如上措施及解决方案能够帮到有需要的你。
element plus - 报错Uncaught DOMException: Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘x‘ is no
高级前端工程师
06-01 3812
vue3，element-plus，虚拟表格，querySelectorAll，鼠标移入表格就报错，鼠标放到表格上就会一堆报错，elementPlus虚拟化表格报错警告解决，el-table-v2，如何解决虚拟化表格警告，element plus虚拟化表格组件， [Vue warn]: Unhandled error during execution of native event handler，Uncaught DOMException: Failed to execute 'querySelector
vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程
高级前端工程师
07-09 1万+
vue3，nuxt3，element-Plus，upload，上传组件，上传文件报错，本地开发没问题，部署打包上线就会报错，这个问题如何解决，还是一直报错，el-upload上传报错，vue3项目使用element上传组件 打包后报错t.upload.addEventListener is not a function的解决方案，VUE3上传功能本地上传正常，打包上传后报错，打包后报错t.upload.addEv，vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEve
uniapp 在 APP中使用video 遇到的问题及解决方式-第一帧黑屏
qq_41901130的博客
10-10 1675
（注意：renderjs即视图层，与逻辑层是分离的，所以无法直接通过this通信）（注意：renderjs即视图层，与逻辑层是分离的，所以无法直接通过this通信）（此方式只适配APP端，小程序/H5 需要使用条件编译，再写一套代码）
uniapp -＞video 黑屏 无时长（新手容易遇到的坑）
妄梦久挽的博客
11-08 5440
注意注意 视频引入黑屏，不能看到时长的问题
微信小程序开发使用video标签黑屏、不显示、无法播放视频
2303_76868290的博客
06-02 6236
一开始我是插入的的本地视频，但发现可能文件过大需要分片，比较麻烦。⑥然后，在微信小程序开发中对应的代码index.wxml文件中。②上传之后，等审核成功后，在个人中心打开视频，① 我们可以将视频上传到云端（比如好看视频）将刚复制的对应代码粘贴到对应src中即可。⑤ 复制“Video url”⑧然后重新编译一下就饿可以了。希望可以帮助大家解决问题。
uni微信小程序 部分安卓用户播放视频有声音无画面问题
m0_60010733的博客
09-26 1199
video组件支持的视频格式： 支持的视频编码格式： 我们的视频是mov，将视频转成mp4后仍然不能正常播放，经过对比发现不能播放的视频均为HEVC编码格式，部分老旧机型不支持HEVC，HEVC对硬件要求较高，所以兼容性较差，编码格式转为AVC（H.264）后所有用户视频正常播放
video组件报错，DOMException: The element has no supported sources.
DK848的博客
03-22 2844
【代码】video组件报错，DOMException: The element has no supported sources.
uniapp - 视频播放器插件，支持播放m3u8 / flv / mp4视频流等各种格式的视频文件，附带全屏播放、播放快进、循环播放、音量调节、视频解码等功能（详细示例代码，一键复制开箱即用！）
高级前端工程师
08-02 1万+
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端播放
Vue中DOM异步更新的解决方案——$nextTick
LiLi_code的博客
06-28 1199
html: <body> <div id="app"> <audio ref="audio" :src="url" controls></audio> <span>第 {{index}} 首歌</span> <button @click="changeUrl">切歌</button> </div> </body> js: <script src="h
uni-app之video视频组件
热门推荐
踏雪无痕
06-04 3万+
一.平台差异说明 二.属性说明 备注：video默认宽度 300px、高度 225px，可通过 css 设置宽高。 三.案例实战 1.video界面 <view class="page"> <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.ali
hls.js 播放hls流 报错 DOMException: The element has no supported sources 可否给我一段正确使用hls.js代码 uniapp
11-20
HLS.js 是一个用于在 Web 和移动端浏览器上播放 HLS (HTTP Live Streaming) 流媒体内容的 JavaScript 库。如果你在使用 uniapp（微信小程序、H5环境）中遇到 "DOMException: The element has no supported sources" 的错误，这通常意味着浏览器或小程序环境不支持直接播放HLS流。 uniapp环境中，由于微信小程序的限制，可能需要通过特殊的适配处理才能播放HLS。你可以尝试以下步骤： 1. 首先，确保在uniapp项目中安装了合适的video组件，比如`vue-video-player` 或者 `hls-vue-player` 这样的插件，它们会提供HLS兼容的播放器。 ```html <template> <hls-video ref="hlsPlayer"></hls-video> </template> <script> import HlsVideo from '@components/HlsVideo.vue'; // 假设你已引入了HLS Video组件 export default { components: { HlsVideo, }, data() { return { url: 'your_hls_stream_url', // 替换为你实际的HLS流URL }; }, mounted() { this.$refs.hlsPlayer.src = this.url; // 如果需要，可以设置其他配置选项 this.$refs.hlsPlayer.config = { // ... }; }, </script> ``` 2. 确保你已经按照所使用的库文档设置了正确的初始化配置，并处理可能出现的错误，例如网络加载失败等。 3. 在uniapp中，可能需要考虑使用腾讯云的Tencent Media Service（TMS）或其他服务提供的HLS直播分发解决方案，因为微信小程序有特定的网络请求和安全策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

十一猫咪爱养鱼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值