不同浏览器的行为可能不一致，本文中的页面是在 Chrome 91 下运行
原型
一个展示视频素材的列表，鼠标悬浮到每个块上就会自动播放，移开就暂停。
播放方案很简单，就是用
<video>和 APIplay和pause
问题
接到反馈：逐个视频浏览，刚开始的几个视频鼠标移上去很快就开始播放了，但随着浏览个数增加，等待播放的时间越来越长。
排查
一开始觉得可能是网络问题，打开F12 Network 调试。
复现
浏览前几个视频都在1s内就开始播放，第4个开始无法播放，继续移到下两个视频尝试播放，均卡住。
从下图可以看到卡住的请求 Status: 206 但 Time: Pending。
此时鼠标还在第6个视频上等待播放，大概过了10+秒，突然可以播放。从下图可以看到前几个视频的请求的 Timing 延长到了后3个视频可以播放的时间点，难道是因为前面的请求没结束导致的阻塞？
确定视频暂停后请求未停止
浏览一个视频，开始播放后就移开鼠标暂停，查看该视频请求详情，发现 CAUTION: request is not finished yet!，可以确定视频暂停后请求未停止。
找到原因
因为视频暂停后请求没有立即结束，所以随着鼠标不断移进-移出操作播放-暂停多个视频，请求最终会达到上限（即便用了HTTP2，浏览器/服务器仍会做限制）。
解决方案
暂停后删除 video 元素
这个方法虽然不会立即停止请求，但很快。
暂停后置空 video.src 属性
这个方法可以立即停止请求。
