HTML5的play()函数对<img>标签无效，因其仅适用于<video>和<audio>元素；GIF由浏览器自动解码播放，<img>无play/pause等媒体方法，调用会报TypeError。
HTML5 的 play() 函数不能播放 GIF 动图 —— 它只对 <video> 和 <audio> 元素有效，而 GIF 是静态 <img> 标签加载的位图序列，没有媒体控制接口。
为什么 play() 对 <img src="xxx.gif"> 无效
GIF 动画由浏览器在图像解码层自动播放，不经过 HTMLMediaElement 接口。调用 img.play() 会直接报错：TypeError: img.play is not a function。这不是兼容性问题，而是规范层面的限制 —— <img> 没有 play、pause 或 currentTime 等方法。
想控制 GIF 播放？只能换方案
真正可控制的“GIF 播放”必须绕过原生 GIF 渲染，常见做法有：
- 用
<canvas>手动逐帧绘制 PNG 序列，配合requestAnimationFrame控制启停和速率 - 将 GIF 转为 MP4/WebM 视频，用
<video>标签加载，此时video.play()、video.pause()全部可用 - 使用轻量库如 freezeframe.js（基于 Canvas），它把 GIF 替换为第一帧 + 点击触发逐帧解码播放
例如转视频后：
立即学习“前端免费学习笔记（深入）”；
<video id="gifVideo" src="animation.mp4" muted loop></video>
<button onclick="document.getElementById('gifVideo').play()">播放</button>
顺带提醒：别信“给 GIF 加 controls 属性就能控”
<img src="a.gif" controls> 完全无效 —— controls 是 <video> 和 <audio> 的专属布尔属性，<img> 解析时会忽略它，且不会报错，容易误以为“生效了”。同理，autoplay、preload 对 GIF 也无实际作用。
真要暂停 GIF，唯一可靠方式是替换 src 为静态帧（比如首帧 PNG），或用 CSS animation-play-state: paused —— 但后者仅对 CSS 动画版 GIF（即用 @keyframes 模拟的）有效，不是原生 GIF。
