1.H5 中判断是否是 wifi环境

总结：H5中不好判断是否是wifi环境

原因：实现方法少，浏览器兼容性不好

实现代码：

let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { effectiveType: undefined };
console.log(connection.effectiveType);
// 4g wifi......

2.H5怎么在手机上预览(由于公司网络限制，不好按照之前的方法访问；也没有测试机)

描述：之前都是本机ip，手机与电脑处于同一网路，现在是因为公司网络问题，访问不了

导致每次想要在手机上查看必须要发布

实现方案：可以使用电脑自带的虚拟机

Mac OS 打开IOS虚拟机命令：

open -a Simulator

Mac OS 打开Androidn虚拟机

参考网址：https://mumu.163.com/mac/index.html

3.去除微信内置浏览器和 ios中 video播放默认全屏

在video标签上加上这三个属性

x5-playsinline="true" // 解决Android中微信内置浏览器打开默认全屏
webkit-playsinline="true" //解决IOS中播放视频时会默认全屏展示
playsinline="true"

4.video手动触发播放、暂停、全屏事件

videoDom.play(); // 播放 
videoDom.pause(); // 暂停 
// 全屏 
if (this.videoDom.requestFullScreen) {
  this.videoDom.requestFullScreen();
} else if (this.videoDom.mozRequestFullScreen) {
  this.videoDom.mozRequestFullScreen();
} else if (this.videoDom.webkitRequestFullScreen) {
  this.videoDom.webkitRequestFullScreen();
} else if (this.videoDom.requestFullscreen) {
  this.videoDom.requestFullScreen();
} else if (this.videoDom.webkitRequestFullscreen) {
  this.videoDom.webkitRequestFullscreen();
} else if (this.videoDom.webkitSupportsFullscreen) {
  this.videoDom.webkitEnterFullscreen();
}

5.video监听退出全屏事件，兼容IOS和Android

// IOS中退出全屏事件
this.videoDom.addEventListener('webkitendfullscreen', function () {
  that.videoStatus = false;
});
// Android中退出全屏事件
this.videoDom.addEventListener('x5videoexitfullscreen', function () {
  console.log('android video 退出全屏');
});

6. 监听窗口变化事件

window.onresize = function temp(){
    // 做你想做的操作
}

原文地址：https://www.cnblogs.com/chenwan1218/p/14691534.html

H5入坑之路

1.H5 中 判断 是否 是 wifi环境

2.H5怎么 在 手机上 预览(由于公司网络限制，不好按照之前的方法访问；也没有测试机)

3.去除 微信 内置浏览器 和 ios中 video播放 默认全屏

4.video手动 触发 播放 、暂停 、全屏 事件