wx.previewMedia视频播放常见问题解析

Question

**问题描述：使用wx.previewMedia预览视频时，部分视频无法播放或播放不流畅，如何排查和解决？** 在使用微信小程序API `wx.previewMedia` 进行视频预览时，开发者常遇到视频无法播放、播放卡顿或加载缓慢等问题。常见原因包括：视频格式不支持、视频链接未通过微信校验、网络请求受限、或未正确配置域名白名单。此外，部分安卓设备对视频编码兼容性较差，也可能导致播放异常。建议开发者检查视频链接有效性、确保域名已备案并加入小程序合法域名列表、使用常见编码格式（如H.264），并通过微信开发者工具模拟不同设备进行兼容性测试。

Answer 1

一、问题背景与初步定位

在微信小程序开发中，wx.previewMedia 是一个用于预览图片和视频的常用API。但在实际使用中，开发者常遇到视频无法播放、播放卡顿或加载缓慢的问题。

初步判断应从以下几个方向入手：

• 视频链接是否有效且可访问
• 视频格式是否符合微信小程序的播放要求
• 是否配置了合法域名白名单
• 是否通过微信平台的视频校验

二、深入排查流程图

graph TD
    A[开始] --> B{视频是否可播放}
    B -- 是 --> C[播放流畅？]
    B -- 否 --> D[检查链接有效性]
    D --> E[是否为HTTPS协议]
    E -- 是 --> F[是否加入合法域名白名单]
    E -- 否 --> G[修改为HTTPS]
    F -- 是 --> H[检查视频格式]
    H --> I{是否为H.264编码}
    I -- 是 --> J[兼容性问题排查]
    I -- 否 --> K[转码为H.264]
    C -- 否 --> L[网络请求慢或卡顿]
    L --> M[优化CDN或视频分片]
    C -- 是 --> N[播放正常]
    J --> O[测试不同设备机型]
    

三、常见问题与解决方案

问题类型	可能原因	解决建议
无法播放	视频链接未通过微信校验	确保链接为HTTPS，且加入小程序后台域名白名单
播放卡顿	视频编码不兼容	使用H.264编码格式，避免使用HEVC等高级编码
加载缓慢	服务器带宽或CDN配置不佳	优化CDN加速配置，使用分段加载（如HLS）
安卓播放异常	部分设备兼容性差	使用微信开发者工具模拟多机型测试，或降级编码参数

四、视频格式与编码建议

微信小程序支持的视频格式如下：

• mp4
• mov
• webm
• ogg

推荐使用H.264编码的MP4格式，兼容性最佳。

可通过以下命令使用ffmpeg进行转码：

ffmpeg -i input.mp4 -c:v libx264 -preset fast -crf 23 -c:a aac output.mp4

五、域名与网络配置

微信小程序要求视频资源必须通过HTTPS协议访问，并且域名需满足以下条件：

• 域名已备案
• 域名已添加至小程序后台的“下载域名”白名单中
• 服务器支持CORS跨域请求（如需）

建议使用CDN加速视频资源加载，提升用户体验。

六、设备兼容性与测试建议

不同品牌和型号的安卓设备对视频解码的支持差异较大，建议：

• 使用微信开发者工具中的“真机调试”功能
• 模拟不同系统版本（如Android 9、10、11）进行测试
• 在真实设备上验证播放效果

可通过日志打印和onError回调获取播放错误信息：

wx.previewMedia({
  sources: [{
    url: 'https://yourdomain.com/video.mp4',
    type: 'video'
  }],
  success: () => console.log('播放成功'),
  fail: err => console.error('播放失败', err)
})