微信小程序 video视频IOS可以播放 android无法播放（黑屏一直是加载状态）

最新推荐文章于 2025-10-07 11:12:32 发布
转载 最新推荐文章于 2025-10-07 11:12:32 发布 · 4.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/w18838020329/article/details/99441585

本文介绍了解决微信小程序在Apache2.4服务器环境下遇到的gzip压缩支持问题。通过在Apache配置文件中添加特定代码行，可以有效避免因gzip压缩导致的小程序加载异常。

服务器Apache2.4，原因是微信小程序对gzip压缩支持的问题。解决办法是在Apache配置文件中找个空白的地方加上一行：

SetEnvIfNoCase Request_URI .(?:gif|mp4)$ no-gzip dont-vary

在这里插入图片描述

微信小程序 - 解决video视频播放黑屏只有声音没有画面问题，使用Video标签无法播放视频失败只有声音、黑屏视频播放不了，安卓手机/苹果ios视频只有声音却没有画面（uniapp微信小程序也适用）
🏆 前端领域优质创作者
10-07 4606
微信小程序video有声音但是画面黑屏，uni-app微信小程序视频播放黑屏但是有音频，微信小程序video android真机或苹果ios系统中黑屏 只有声音没有画面，Uniapp微信小程序 Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法，解决小程序视频编码兼容性问题导致黑屏，出现黑屏但有声音的问题，video标签播放视频有声音，但是黑屏的原因及解决办法，mp4视频编码的问题，video标签播放视频有声音，但是黑屏。uniapp使用video标签无法播放视频出现黑屏问题处理，如何解
解决小程序video控件在真机黑屏问题
01-05
解决小程序video控件在真机播放时视频黑屏问题，下载后执行如下命令： mp4box.exe -inter 500 -isma -hint 123.mp4
微信小程序 - 使用Video组件部分mp4视频黑屏、真机播放视频出现黑屏或无法加载、或编码问题，解决微信小程序video视频黑屏不显示且无法播放（uni-app微信小程序同样也能解决，详细排查教程）
最新发布
🏆 前端领域优质创作者
10-07 4542
微信小程序Video组件部分mp4视频黑屏，uniApp小程序video视频真机中黑屏没画面，微信小程序开发使用video标签黑屏、不显示、无法播放视频，uniapp小程序Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法浏览器上能正常播放，小程序视频播放卡死，uniapp使用video标签无法播放视频出现黑屏问题处理，视频编码问题怎么解决，微信小程序视频解码黑屏，小程序黑屏不显示画面的情况，解决小程序video控件在真机黑屏问题，安卓真机、苹果ios黑屏，无法正常显示，小程序video
微信小程序 - 同一页面存在多个video时，video无法正常播放一直在加载转圈解决方案
Aan___的博客
12-05 3028
注：不建议同个页面使用多个video组件，建议不超过3个video，如果要实现video列表功能，请进行优化（image列表，选中时将image替换成video)2. 条件判断视频的 id 等于 播放视频的 id 时 在将视频展示，不一致时显示图片。1. 防止视频封面与图片不一致，使用 poster 属性修改视频封面为图片封面。3. 为图片设置点击事件，用于切换视频进行播放。
小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）
weixin_61877032的博客
03-02 4768
微信小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）
uniapp -＞video 黑屏 无时长（新手容易遇到的坑）
妄梦久挽的博客
11-08 5640
注意注意 视频引入黑屏，不能看到时长的问题
微信小程序 video视频android无法播放
^璐三岁要耍蓅氓♡
06-16 3666
服务器Apache2.4，原因是微信小程序对gzip压缩支持的问题。解决办法是在Apache配置文件中找个空白的地方加上一行： SetEnvIfNoCase Request_URI .(?:gif|mp4)$ no-gzip dont-vary ...
小程序IOS可以正常播放视频，安卓黑屏或者不能播放
FurtherSkyQ的博客
09-09 1962
解决办法：如果你找了很多方法都不能解决，那你把视屏换一个文件夹试试，可以放在项目的根目录或者是上传文件时的upload文件夹根目录下 如图：
微信小程序 - 苹果ios无法播放视频、安卓android手机可以播放，使用video播放MP4视频时安卓正常播放视频iOS无法播放出现黑屏、加载失败或一片黑没反应等（uniapp微信小程序也能解决）
🏆 前端领域优质创作者
10-06 4576
微信小程序ios无法播放视频，微信小程序 video标签 ios不能播放视频或视频黑屏，ios无法播放视频，android手机可以播放，视频格式为mp4，uniapp微信小程序安卓设备android可以播放在线网络视频 ,苹果ios设备无法播放视频，微信小程序 video标签 ios不能播放视频或视频黑屏，安卓手机正常播放iPhone手机却黑屏，如何解决这个问题，在线播放视频URL链接，iOS无法播放MP4视频文件的解决方案，在Android设备上可以正常播放，但在iOS设备上却出现黑屏、无法加载或无法播放
精选资源
微信小程序使用video组件播放M3U8视频卡顿
01-20
微信小程序中使用video组件播放m3u8直播视频，在ios的真机预览里点击video中间的播放容易卡几十秒，此时什么都做不了，手机也非常非常卡。 我的解决办法是在视频video组件里加入custom-cache={{false}} autoplay=...
微信小程序 - 强力解决播放视频卡顿问题，小程序使用video组件播放视频或第三方视频插件，会出现卡顿或者无法播放的各种奇怪问题（微信小程序苹果ios/安卓播放视频很卡不流畅、视频太长或文件大等情况）
热门推荐
🏆 前端领域优质创作者
09-13 1万+
微信小程序视频组件播放卡顿，微信小程序video组件出现无法播放或卡顿，微信小程序video组件播放时会出现卡顿，微信小程序使用video组件播放视频的时候，会出现卡顿或者无法播放的问题，微信小程序安卓视频播放卡顿问题，微信小程序苹果ios手机播放视频不流畅很卡，加cdn还是卡，uniapp播放视频会有明显的卡顿问题，video视频时卡顿不流畅问题，为什么video组件播放视频卡顿?苹果微信小程序通过video组件播放视频时卡顿，怎么解决？微信小程序video组件出现无法播放或卡顿，设置custom-cac
android 微信小视频无法播放器,安卓video组件无法播放视频
weixin_34759094的博客
05-26 506
- 当前 Bug 的表现(可附上截图)使用上述代码片段，在任何iPhone机器上都可以正常播放视频，但是在几乎所有测试过的安卓机器上却无法播放视频，具体表现为加载图标不停转动，但永远无法加载出来。yueobjectstore.blob.core.windows.net已经加入了白名单(否则iPhone上也不能播放出来)，能成功播放的iPhone机型有iPhone6S, iPhone8, iPhon...
解决Uniapp视频在手机上无法播放的终极指南！
CRMEB小程序商城的博客
03-25 9944
介绍：本文主要介绍uniapp中video标签在手机端无法播放视频的问题并且如何解决。
微信小程序开发使用video标签黑屏、不显示、无法播放视频
2303_76868290的博客
06-02 7252
一开始我是插入的的本地视频，但发现可能文件过大需要分片，比较麻烦。⑥然后，在微信小程序开发中对应的代码index.wxml文件中。②上传之后，等审核成功后，在个人中心打开视频，① 我们可以将视频上传到云端（比如好看视频）将刚复制的对应代码粘贴到对应src中即可。⑤ 复制“Video url”⑧然后重新编译一下就饿可以了。希望可以帮助大家解决问题。
Uniapp 视频播放器运行到微信小程序后黑屏解决
qq_42516774的博客
08-17 1672
发现这个之后，我开启本地服务器，然后将资源放到服务器上，通过http的url路径就可以使视频正常播放了。
微信小程序iOS视频播放开始黑屏问题
qq_35946021的博客
02-11 2035
custom-cache="false" 把这删了就可以了。iOS开始播放视频时会有几秒黑屏卡顿，然后才会流畅播放。而安卓手机就不会有黑屏，点击播放直接就可以播放视频了。这个属性就会让iOS开始播放就有几秒钟黑屏。在微信小程序播放视频时遇到个奇怪的问题。至于为什么想起要加这个属性是因为。后来发现我是加了一个。
插入本地视频是黑屏不能播放
06-26
### 微信小程序插入本地视频显示黑屏无法播放的解决方案 在微信小程序中插入本地视频时出现黑屏或无法播放的问题，通常与视频加载过程、兼容性以及页面渲染机制有关。以下是针对该问题的详细分析和解决方案： #### 1. 使用 `bindloadedmetadata` 规避黑屏问题 当视频元数据加载完成但尚未开始播放时，页面可能会短暂地显示黑屏。为了避免这种视觉上的不适，可以利用 `bindloadedmetadata` 事件来控制页面内容的显示时机。具体做法是，在视频加载完成之前展示一个骨架屏或 loading 效果，待元数据加载完成后隐藏加载状态并展示视频内容。 ```html <view wx:if="{{isLoading}}">加载中...</view> <video wx:else src="../../videos/test.mp4" bindloadedmetadata="onLoadedMetadata" binderror="onVideoError"></video> ``` 在 JS 中实现如下逻辑： ```javascript Page({ data: { isLoading: true }, onLoadedMetadata() { this.setData({ isLoading: false }); }, onVideoError() { this.setData({ isLoading: false }); } }); ``` 通过这种方式，可以在视频加载过程中保持良好的用户体验，并避免因黑屏导致的界面空白现象[^2]。 #### 2. 检查视频路径与格式兼容性 确保视频文件路径为相对路径且正确无误。例如： ```html <video src="../../videos/course.mp4"></video> ``` 如果路径错误，视频将无法加载。此外，尽管微信小程序支持多种视频格式（如 MP4、M4V、MOV 等），但在实际使用中仍需考虑设备对特定编码的支持情况。推荐使用 H.264 编码的 MP4 格式以提高兼容性。 #### 3. 设置超时机制防止加载卡顿 考虑到某些情况下视频可能因网络延迟或其他异常而长时间处于加载状态，建议设置一个最大等待时间（如 2 秒），超过该时间后自动关闭 loading 效果，确保页面不会一直处于加载状态。 ```javascript Page({ data: { isLoading: true }, onLoad() { setTimeout(() => { if (this.data.isLoading) { this.setData({ isLoading: false }); } }, 2000); } }); ``` 此方法可作为容错机制的一部分，即使视频未能及时加载完成，也能保证用户界面的流畅性。 #### 4. 处理视频加载失败的情况 为 `<video>` 组件绑定 `binderror` 事件，可以捕获具体的错误信息并进行相应的处理。例如： ```html <video src="{{videoPath}}" binderror="onVideoError"></video> ``` 在 JS 中定义错误处理函数： ```javascript Page({ data: { videoPath: 'your_video_url' }, onVideoError(e) { console.error('Video error:', e.detail.errMsg); this.setData({ isLoading: false }); } }); ``` 通过记录日志和反馈机制，有助于快速定位问题根源并优化后续版本的表现。 #### 5. 测试不同设备环境下的表现 由于微信小程序运行在多种终端上，包括 Android 和 iOS 设备，因此需要在多个真实设备上测试视频播放效果。尤其要注意低端机型或旧系统版本可能存在的性能瓶颈。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值