最近我在做一个小程序项目,需要在单个页面里展示大量的视频列表,但有个头疼的限制:小程序官方规定,同一个页面上最多只能放5个 video
组件,超出这个数量,视频就会加载失败,根本无法播放。
这个需求可把我难住了。页面上足足有几十个视频,如果真放几十个 video
标签,不仅会触发生效的限制,性能也会卡得没法看,用户肯定得吐槽。
我在网上搜了好久,终于看到一位大佬的文章,提到了一个“曲线救国”的妙招——用视频封面的静态图片来代替 video
组件本身。原理其实很简单,既然小程序限制的是 video
标签的数量,那我们就不用它来展示,改用 image
组件来显示视频的第一帧画面,用户点击某个封面的时候,再动态创建一个 video
组件来播放。
具体怎么做?其实特别简单,如果你用的也是阿里云OSS(对象存储)的话,只需要在视频地址后面拼接上一段处理参数就行了:
?x-oss-process=video/snapshot,t_0,f_jpg
比如你原来的视频链接是:
https://your-bucket.oss-cn-hangzhou.aliyuncs.com/videos/demo.mp4
处理后用作封面的链接就是:
https://your-bucket.../demo.mp4?x-oss-process=video/snapshot,t_0,f_jpg