日常采坑

video视频自动播放失效问题

页面初始化的时候调用video标签的play函数即可

微信视频播放的问题

需求是一个视频在网页中需要自动循环播放
开心的把pc端的代码移到移动端，结果在微信中打开，嗯，视频直接就没显示了，经过一番折腾，解决办法

1、取消网页全屏播放

在video标签加上这一堆
 autoplay
 loop
 preload="auto"
 webkit-playsinline="true"
 poster=""
 playsinline="true"
 x5-video-player-type="h5"
 x5-video-player-fullscreen="true"
 x-webkit-airplay="allow" 
 x5-video-orientation="portraint"

说明：阻止视频在移动端页面中全屏播放https://www.jianshu.com/p/8c17967adee7 哈哈哈哈，都是百度来的，感谢度娘

2、微信中自动播放不生效

感谢这位大大iOS系统和微信中不支持audio自动播放问题的解决方法https://www.jb51.net/article/123315.htm

<script> 
 //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
 document.getElementById('idName').play(); 
 //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
 document.addEventListener("WeixinJSBridgeReady", function () { 
 document.getElementById('idName').play(); 
 document.getElementById('video').play(); //视频自动播放
 }, false); 
</script>

拖拽

主要是在pc端有问题，pc端鼠标移动比较灵活，注意将mousedown事件绑在需要移动的div上，move事件和up事件则绑定在可拖拽的整个区域内，同时需要禁止事件冒泡
ps：有时候也会跟jquery或zepto版本有问题

flex使用：建议还是不要在pc端使用flex，兼容问题比较多，不过移动端还是可以爽爽的用，，，，，目前遇到的坑就是在ie11下对align-items的显示会有问题，直接失效了，还有just-flu，在容器的宽和高不设置的情况下，显示还是失效了，，心塞塞，有大佬知道解决办法的嘛，，，附上地址：https://caniuse.com/#search=align-itemss

image.png