巡检类APP如何生成可动态处理图片与视频的类画廊列表？

核心思路 #

放弃单一的Image控件，根据文件类型动态切换图片显示或视频播放组件，同时针对性解决视频缩略图的生成问题。

步骤1：识别文件类型 #

从导入的文件路径中提取后缀，区分图片和视频：

• 以Power Apps为例，用字符串操作提取后缀：

  Set(varFileExt, Lower(Right(ThisItem.FilePath, Len(ThisItem.FilePath) - InStrRev(ThisItem.FilePath, "."))))
  

• 判断规则：后缀为png/jpg/jpeg的是图片；mp4/mov/avi的是视频。

步骤2：动态渲染组件 #

在Gallery的模板容器中，同时放置Image和Video控件，通过Visible属性控制显示逻辑：

• Image控件：
  • Visible属性：varFileExt in ["png","jpg","jpeg"] || varFileExt in ["mp4","mov","avi"]（视频项显示缩略图）
  • Image属性：If(varFileExt in ["png","jpg","jpeg"], ThisItem.FilePath, ThisItem.ThumbnailPath)
• Video控件：
  • Visible属性：varFileExt in ["mp4","mov","avi"] && varShowVideo
  • Media属性：ThisItem.FilePath
  • AutoPlay属性：false（避免自动加载占用资源）
• 可给Image控件添加点击事件，触发视频控件显示并播放：Set(varShowVideo, true); Video1.Play()

步骤3：生成视频缩略图 #

方案A：Excel导入前预处理（推荐）

用脚本或VBA批量生成视频缩略图，把缩略图路径和原视频路径一起写入Excel：

• 用ffmpeg生成缩略图的命令：

  ffmpeg -i "C:\巡检视频\site1.mp4" -vframes 1 -q:v 2 "C:\巡检缩略图\site1_thumb.jpg"
  

• 在Excel中新增ThumbnailPath列，填入对应缩略图路径，导入后集合即可直接调用。

方案B：应用内动态生成

通过低代码流实现：

1. 创建一个流，接收视频路径参数，调用ffmpeg生成缩略图后返回路径。
2. 在应用中加载视频项时，调用该流获取缩略图路径，赋值给Image控件。

步骤4：优化加载体验 #

• 将Excel中的相对路径改为绝对路径（如C:\巡检数据\folder\pic.png），减少路径解析延迟。
• 开启Gallery懒加载（多数低代码平台默认支持），仅渲染当前可视区域内的项。
• 视频控件默认隐藏，点击缩略图再触发播放，避免初始加载大量视频流占用资源。

内容的提问来源于stack exchange，提问作者Bryan