html5
文章平均质量分 76
Joyce的前端日常
这个作者很懒,什么都没留下…
展开
-
iOS上陀螺仪失效问题
1. 功能在实现如下功能时,通常会用到基于HTML5陀螺仪的DeviceMotionEvent和DeviceOrientationEvent。摇一摇旋转手机看全景图像DeviceMotionEvent 主要属性:属性说明单位acceleration包含x,y,z方向上的加速度m/s^2accelerationIncludingGravity含x,y,...原创 2020-01-20 17:23:55 · 5965 阅读 · 2 评论 -
H5的视频解决方案(2) —— chrome自动播放问题
2. chrome自动播放问题(1) 背景和问题比较明确的是在mobile中,iOS不允许自动播放,但是安卓是可以的。为了兼容性,一般采用的是点击播放按钮播放,或者首次触屏后开始播放。然而最近遇到的问题:在chrome浏览器中页面加载完成之后播放视频会失败,并且出现如下报错: (2) chrome条款上图中的链接为:https://developers.google....原创 2018-08-08 15:00:57 · 13325 阅读 · 0 评论 -
H5的视频解决方案(3)——第三方视频接入(腾讯、youtube)
3. 腾讯视频接入4. YouTube视频接入(1) 使用iframe嵌入(2) 使用YouTbue API3. 腾讯视频接入通过iframe将视频插入。地址为:https://v.qq.com/iframe/player.html?vid={视频id}。如何获取id?例如这样一个腾讯视频的播放页面:https://v.qq.com/x/page...原创 2018-08-07 17:25:32 · 21344 阅读 · 0 评论 -
H5常见问题
https://github.com/FrontEndRoad/HTML5-FAQ/blob/master/README.md转载 2018-08-06 15:56:46 · 384 阅读 · 0 评论 -
H5的视频解决方案(1) —— mobile video内联播放
mobile内联播放(1) webkit-playsinline和playsinline(2) android微信(3) 最佳实践(4) 其他尝试和存在问题mobile内联播放内联播放指的是视频在文档流中直接进行播放,不会弹出新的播放窗口的方式。<video id="video&原创 2018-08-03 17:09:15 · 13692 阅读 · 0 评论 -
移动端H5嵌入iframe滚动问题
背景(1) 实现功能如图,悬浮窗中为iframe,如果超出容器大小实现滚动。(2) 问题在iOS上,悬浮窗中的内容如果不是iFrame是可以滚动的,但换成iframe后就无法在其中滚动。解决方案(1) 思路问题在于overflow: auto或者overflow: scroll没有生效。需要在容器上加上:height: 57vh;overf...原创 2018-05-23 17:13:34 · 9323 阅读 · 0 评论 -
WAI-ARIA 无障碍Web规范(屏幕阅读)
无障碍设计无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和”间接访问”。无障碍设计可以理解为 “能够访问”, 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。无...转载 2018-05-21 10:52:20 · 2385 阅读 · 1 评论 -
移动端兼容性问题解决方案
1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器...转载 2018-02-23 18:35:32 · 1232 阅读 · 0 评论 -
浅谈Audio
资料1 HTML 5 audio 标签2 HTML5 音频标准3 HTML5 视频和音频的 DOM 参考手册音频标准创建Audio1 audio 标签2 JS生成Audio元素1 documentcreateElement2 new Audio操作Audio1 检测音频类型是否可以播放canPlayType2 更改音频来源重载音频load1 需要使用l...原创 2018-02-12 16:16:59 · 2604 阅读 · 0 评论 -
H5背景音乐解决方案
前言背景音乐播放1 自动播放1 微信问题2 Safari问题3 解决方案代码2 点击播放离开页面关闭音乐缓存状态1 客户端存储数据方法2 示例完整解决方案代码1. 前言很多H5的项目会用到背景音乐,虽然是很小的一个模块,但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。在进行下面内容之前,如果你并不了解Audio,可以参考之前的文章...原创 2018-02-22 15:04:59 · 21379 阅读 · 6 评论 -
H5横竖屏等判断和处理
(1) 是否是手机端function isMobile(){ return /Mobile/i.test(navigator.userAgent);}(2) 横竖屏判断userOrientation();window.addEventListener("onorientationchange" in window ? "orientationchange" : "res...原创 2018-02-26 18:27:28 · 2965 阅读 · 0 评论 -
Audio实战——击鼓并录制播放
背景及预备知识1 需求2 了解audio用法实战1 实现思路2 实现过程1 结构2 播放对应敲打声音3 记录序列4 播放序列5 事件注册3 完整代码混响1 通过js创建Audio2 html创建audio滚动播放1. 背景及预备知识(1) 需求用户自定义一段击鼓的声音,并录制下来。之后,可以将这段录制的声音播放出来。...原创 2017-12-06 18:51:53 · 353 阅读 · 0 评论 -
HTML5调用照相机并自定义显示获取到的图片(FileReader)
越来越多的移动端网页流行,在手机上拍摄照片或者从相册中选取照片并上传的功能不可或缺。本文以实例说明上述功能如何实现,并介绍FileReader对象。原创 2017-09-07 19:09:54 · 7572 阅读 · 0 评论