日常采坑

Posted 2021-01-19 mssblog

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版本有问题