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

最近开发一个小程序，发现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这个插件，它可以直接下载网站正在播放的视频，我在腾讯视频上亲测可用，部分短视频可以，电影电视剧还是不行。

针对没有梯子的小伙伴，可以直接在 https://github.com/DeppWang/Chrome-extensions 下载对应的插件，在浏览器搜索框中输入chrome://extensions/打开扩展程序页面(或者右上角三个点->更多工具->扩展程序 )，选中右上角的开发者模式，将下载好的插件拖动到扩展程序页面完成安装。

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就可以了。

总结

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

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