H5入坑之路

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(){
    // 做你想做的操作
}