|
前段时间接的需求原本轮播图中用svg处理动图，发现极度占用性能，先要做成兼容图片和视频轮播图包含视频，轮播图支持自动循环切换切换视频循环播放，谷歌浏览器畅快自如奈何ie一言难，总结一下遇到的bug即处理方式。
html部分
1、（非ie）因该是没有处理视频销毁的原因，当后台配置删除掉现有视频只剩一个时候，页面中loop形成的两个复制视频不会消失，造成页面还可以切换，但实际因该只有一个视频，剩余多个时候不会发生。
处理方式：让页面只有一个时候禁止循环，也就是判断轮播图个数为1个时候让loop为false，这样不会生成两个复制出来的slide
2、由于视频播放区域的尺寸不能改变，会造成上下或是左右有黑的的边框，谷歌等浏览器的处理方式较为简单，直接通过object-fit: cover;即可效果类似background:cover；img标签也有类似问题除非尺寸恰到好处（本项目之前就是用背景替换img），但是这样谷歌浏览器上肯定又有问题，处理方式如下：但这种吃力方式得视频文件刚好符合slide的高度，宽度越宽越好项目中使用的1920x150，直接用ie的也可以，项目为兼容之前的ie单处理
3、在ie浏览器缩放时候（按住ctrl滚动滚轮）发现视频不会隐藏，不知道是代码问题还是兼容问题，谷歌中正常，当缩放的较小时候本该隐藏的视频都没有隐藏所有的都在播放，一会消失又或者不消失终归是有问题，处理方式，想法是页面首次加载时候让第一轮播图显示其余轮播图全部隐藏（但是代码中是全部隐藏，却没有问题），当触发了切换时候也只显示当前的让其他隐藏。
还有个小问题一开始轮播图是可以通过拖动来切换到下一张，但因为透明了会造成下一一张为黑色，兼容处理就禁止了可拖动，配置了'swiper-no-swiping'但这有引起了原本在on方法中的click事件不能触发所以有将点击事件单独做了一个方法。总体还是比较坑但是算是达到预期效果吧。
| 
转播
