首页 > 其他 > 详细

H5入坑之路

时间:2021-04-22 23:48:01      阅读:25      评论:0      收藏:0      [点我收藏+]

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

 

 

 

 

 

 

H5入坑之路

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!