Kindle设备完全不支持HTML5 标签，因其浏览器基于老旧WebKit分支，未实现HTMLMediaElement接口；实际表现为视频元素不渲染、document.querySelector(‘video’) 返回null、布局错乱；应改用+alt+文字描述降级兜底。
Kindle 设备根本不支持 标签，所谓“位置异常”实际是视频根本没渲染——不是布局问题，是功能缺失。
为什么 Kindle 上视频不显示或错位
Kindle（包括 Paperwhite、Oasis、Scribe 等主流型号）的内置浏览器基于老旧 WebKit 分支，完全不支持 HTML5 ，也不解析 poster、controls 或 preload 等属性。部分固件会把 标签当作未知内联元素处理，导致行内流错乱、文字换行异常、甚至整段内容塌陷。
- 错误现象：
TypeError: undefined is not an object (evaluating 'video.play')不会出现——JS 甚至拿不到video元素（document.querySelector('video')返回null） - 真实表现：页面空白、文字挤在左上角、CSS
position: absolute失效、display: block被忽略 - 兼容性本质：不是“跨终端适配不足”，而是 Kindle 浏览器连
HTMLMediaElement接口都未实现
替代方案：用静态图 + 文字说明兜底
必须放弃在 Kindle 上播放视频的念头，改用语义化降级。关键不是“怎么修位置”，而是“怎么让内容可读”。
- 用
或替代，src指向关键帧截图（如demo-frame.jpg） - 添加
alt属性描述视频内容：“演示如何长按重命名文件（共3步）” - 在图片下方用
- 通过
@media (-webkit-device-pixel-ratio: 1)或 UA 字符串检测 Kindle（如包含或"Kindle"），动态移除并插入
如果必须保留 video 标签结构（如 CMS 输出固定）
靠 CSS 强制隐藏并替换内容，但需注意 Kindle 对 CSS 的支持极弱——仅认 display: none、visibility: hidden 和基础字体/颜色，@supports、Flexbox、Grid 全部无效。
