如何为GitHub README中的视频添加移动端可正常显示的缩略图

直接拖拽视频到README编辑区生成的默认嵌入代码，未适配iOS Safari的视频加载与播放规则，会出现缩略图不显示、点击跳转离开仓库页面的问题，按以下配置即可修复：

• 替换默认自动生成的视频嵌入语法，改用显式原生<video>标签编写嵌入逻辑，GitHub Markdown渲染引擎完全支持该标签，不会被过滤
• 为<video>标签添加以下兼容属性，从根源解决两个核心问题：
  • controls：启用浏览器原生播放控件，避免点击视频区域触发默认跳转逻辑
  • preload="metadata"：告知浏览器仅预加载视频元数据与首帧资源，iOS Safari会自动将首帧作为缩略图展示，不会额外消耗过多移动流量
  • playsinline：iOS Safari专属适配属性，强制视频在当前页面内联播放，不会跳转至系统原生全屏播放器或其他页面
  • poster（可选兜底配置）：提前截取视频首帧保存为图片存入仓库，将该属性值设为图片的仓库相对路径，极端网络/兼容场景下也能正常显示预览缩略图
• 可直接参考以下可用写法，将资源路径替换为自身仓库内的对应相对路径即可：

<video 
  src="./Assets/demo.mp4" 
  controls 
  preload="metadata" 
  playsinline
  poster="./Assets/demo-cover.png"
  width="100%"
>
  当前浏览器暂不支持视频播放
</video>

• 额外注意事项：
  • 不要给<video>标签外层嵌套<a>跳转标签，否则移动端点击必然触发页面跳转
  • 视频文件优先使用H.264编码的MP4格式，该格式是iOS Safari兼容性最好的视频编码格式，可避免编码不兼容导致的缩略图加载失败、无法播放问题
  • 若不想额外配置封面图，可直接省略poster属性，iOS 15.5版本的Safari在识别到preload="metadata"属性后，会自动拉取视频首帧作为缩略图，点击后直接在当前仓库页面内播放，不会跳转离开

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