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

最近开发一个小程序，发现 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 查看视频编码格式。

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

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

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

3、更改视频的编码格式

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

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

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 查看视频编码格式。

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

4、如何方便的存储视频

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

总结

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

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