解决小程序中视频因为编码格式不能播放的问题

最近开发一个小程序,发现 video 组件的视频不能播放。琢磨了几天,终于可以了。现把经验分享出来,希望对遇到这个问题,但一时还没有解决的小伙伴有一点帮助。

请注意:由于以下使用的七牛云测试域名自创建起 30 个自然日后系统会自动回收。所以 2019.4.20 号以后,部分 url 会失效。

1、如何获取视频 src 地址

首先,我们要知道,video 组件的 src 地址是什么,我开始以为,小程序的 video 组件的 src 地址一定类似官方示例这样的。

http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400

可能跟我一样,没接触过这块的小伙伴也有一样的想法。其实不然,视频 src 地址的长度可长可短,一般为.mp4 结尾。判断 src 地址是否正确,很简单,将地址复制到浏览器中,可正常播放,代表地址正确。

如何获取一个视频的 src 地址?

可以在 Chrome 中使用 Video Downloader professional 这个插件,他可下载视频网站当前页面正在播放的未加密的视频。

如何安装插件,请看

2、查找视频不能播放的原因

首先将视频地址 (如:http://pov1yx2ze.bkt.clouddn.com/iaa1.mp4) 复制到 Chrome 地址栏,看能否在浏览器中播放。如果不能播放,说明视频损坏或者此视频的编码格式是 mpeg4。可参考七牛云解释:

https://developer.qiniu.com/fusion/kb/4082/video-playback-caton-unable-to-play

你可以将视频上传到七牛云对象储存后,复制外链,通过 http://pov1yx2ze.bkt.clouddn.com/iaa1.mp4?avinfo 查看视频编码格式。

image.png

请注意,这是七牛云对象存储的视频才有的功能,不是所有视频地址后加 ?avinfo 都可以。具体可查看七牛云教程:

https://developer.qiniu.com/dora/manual/1247/audio-and-video-metadata-information-avinfo

微信小程序说支持 mpeg-4 格式,不知为何又播放不了。

image.png

3、更改视频的编码格式

现在知道视频播放不了的原因了。我将微信官方提供的视频上传到七牛云后,可以看出编码格式为 h264。

image.png

所以,我们要想办法转换视频的编码格式。我是通过七牛云提供的代码转的,应该也可以通过其他工具转。七牛云教程:

https://developer.qiniu.com/dora/manual/1248/audio-and-video-transcoding-avthumb
https://developer.qiniu.com/kodo/sdk/1239/java#8

运行七牛云提供的代码需要使用七牛云的 sdk。可以使用 Spring Initializr( https://start.spring.io/ ) 初始化一个基于 Gradle 的 springboot 项目,下面是针对 Java 的相关代码:

public static void main(String[] args) {
String accessKey = "access key";
String secretKey = "secret key";

// 待处理文件所在空间
String bucket = "bucket name";
// 待处理文件名
String key = "file key";

Auth auth = Auth.create(accessKey, secretKey);

// 数据处理指令,支持多个指令
String saveMp4Entry = String.format("% s:avthumb_test_target.mp4", bucket);//avthumb_test_target.mp4 是转换后的文件名
String avthumbMp4Fop = String.format("avthumb/mp4/vcodec/libx264|saveas/% s", UrlSafeBase64.encodeToString(saveMp4Entry));//libx264 为编码格式

// 数据处理队列名称,为空时代表使用公有队列
String persistentPipeline = "";
// 数据处理完成结果通知地址
String persistentNotifyUrl = "http://pov1yx2ze.bkt.clouddn.com/qiniu/pfop/notify";// 填一个真正的 url 地址
// 构造一个带指定 Zone 对象的配置类
Configuration cfg = new Configuration(Zone.zone0());
//... 其他参数参考类注释
// 构建持久化数据处理对象
OperationManager operationManager = new OperationManager(auth, cfg);
try {
String persistentId = operationManager.pfop(bucket, key, avthumbMp4Fop, persistentPipeline, persistentNotifyUrl, true);
// 可以根据该 persistentId 查询任务处理进度
System.out.println(persistentId);
OperationStatus operationStatus = operationManager.prefop(persistentId);
System.out.println(operationStatus);
// 解析 operationStatus 的结果
} catch (QiniuException e) {
System.err.println(e.response.toString());
}

}


compile 'com.qiniu:qiniu-java-sdk:7.2.+'//.gradle 中七牛云的 java sdk

现在可以使用 http://pov1yx2ze.bkt.clouddn.com/avthumb_test_target.mp4?avinfo 查看视频编码格式。

image.png

此时将 http://pov1yx2ze.bkt.clouddn.com/avthumb_test_target.mp4 放到小程序就可以播放了。

4、如何方便的存储视频

如果你有备案的域名,将视频存放到七牛云或者其他商业云上,是一个不错的方式。但使用小程序云开发存储视频是一个更好的选择,src 直接使用云文件 ID 就可以了。

总结

说了这么多,其实我也是刚接触小程序的小白。这篇教程主要是提供一个转换视频编码格式的一个途径。如果哪里有错误,请留言。

一句话:如果视频不能播放,可以先看看是否是编码格式的问题。