近期一个项目的需求，需要轮播视频和图片。过程中遇到的问题，在此记录和分享。
考虑服务器上行带宽并不充裕，我的开发思路是页面初始化的时候就让所有的视频和图片资源开始加载，当然这会使页面初始化的时候花较多的时间下载视频和图片资源。但这个问题好解决，页面初始化的时候，做一段时间的加载动画遮挡一下就好。
然后是轮播方式，这次我选择的方式是第一个视频播放结束或者图片展示一段时间后，其对应的div隐藏，如果是视频则暂停，等下次播放的时候，再让该视频从头播放（用vedio的currentTime属性），然后第二个视频或图片的div显示。为了轮播效果不太突兀，加入了淡入淡出的效果。主要用到了css的transition属性以及opacity属性，这个的实现不多赘述，不了解的可以看我的上一篇文章，异曲同工。
以上开发思路确认之后，我以为不会再有什么问题了，于是按照上面的思路开发。但测试的时候发现，视频和图片轮播的时候，部分视频在第二次播放的时候会重新下载视频资源（第二次往后也是），如下图，但图片资源不会。
这就很奇怪了，明明只是做了简单的暂停和播放，怎么会重新下载资源呢。虽然我怀疑自己的怀疑，但我的第一个想法是，vedio标签暂停后再点播放会重新下一遍资源？试了一下，没有。那难道是视频和图片混合轮播，才会出现这种问题？于是我把图片先从轮播列表中删掉。还真就不重复下载资源了！！！但问题真的是视频和图片混合轮播导致的吗，我没有根据，就是感觉这种原因太不符合我的认知。于是第三种想法：是不是视频暂停的时间太长，浏览器（我用的chrome，别叠浏览器有没有不知道，没试）会自己清空掉当前播放的视频来节省内存？于是暂停了一下视频，然后等了几分钟。牛！！暂停时间长一点，再次播放还真的会重新下载视频资源。这个解释比较合理，但我还是无法确定，我像怀疑上一个原因原因，怀疑这个原因。不知道怎么办呢，自己调代码试。经过几次调试，我确认了轮播过程中视频重新下载的问题就是因为视频暂停的时间太长。
那剩下的其实就很简单了，能马上想到的解决方案是：1. 找到浏览器不自动清理视频资源的方法。 2. 不要暂停视频。
因为要赶项目我选择了第二种，不暂停视频。总体还是使用最开始的开发思路，只是当一个视频播放结束后，不暂停该视频，使用vedio的loop属性，让视频继续播放，因为会使用opacity属性隐藏起来，所以继续播放，用户也看不到。css果然就是美颜和障眼法，哈哈哈。
调整之后，视频就不会重复加载了。
