最近开发一个小程序，发现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就可以了。
总结
说了这么多，其实我也是刚接触小程序的小白。这篇教程主要是提供一个转换视频编码格式的一个途径。如果哪里有错误，请留言。
一句话：如果视频不能播放，可以先看看是否是编码格式的问题。
网友评论