【附源码】跨界救场:如何用纯前端的方式获取视频首帧

最近在搬砖时遇到一个问题,在商详页面有些商品只有视频,没有封面图。

我们的交互是用户点击视频封面图调用 native 播放器播放视频,没有封面图视频就没有了载体,就不能展示了。

这个问题有3个解决方案

  1. 后端处理:这种方案虽然可行,但是会影响接口性能,在商详这种关键页面得不偿失。
  2. 客户端处理:客户端处理需要在进入商详页面前预加载视频,会影响页面响应速度,也不太合理。
  3. 前端处理:前端处理必然会用到 video 标签来承载视频,考虑到 video 标签在移动端会有很多兼容性问题,处理起来很复杂,同时也会带来加载的性能消耗。

基于上述三个方案,我们决定在源头解决这个问题,在创建商品时动态获取视频封面并保存。

欢迎在评论区写下你对这篇文章的看法。

首页
Copyright © 2011-2021 iteam. Current version is 2.74.6. UTC+08:00, 2021-07-31 06:18
浙ICP备14020137号-1 $访客地图$