Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
html5 新技术 2
Search
hugo
November 27, 2013
Programming
1
130
html5 新技术 2
主要介绍HTML5新增的JS API
hugo
November 27, 2013
Tweet
Share
More Decks by hugo
See All by hugo
CSS命名及书写规范
baofen14787
0
640
移动端性能调优及16ms优化
baofen14787
1
2.2k
html5 新技术
baofen14787
3
170
html5 新技术 3
baofen14787
1
94
Other Decks in Programming
See All in Programming
ペパボOpenTelemetry革命
pyama86
2
180
Code Reviews
bkuhlmann
4
910
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
150
Next.js App Router
quramy
13
2.2k
Elm 0.19.0 Changes
bkuhlmann
0
510
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1.1k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
510
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
515
39k
Six Lessons from altMBA
skipperchong
22
3k
Designing for Performance
lara
601
67k
A designer walks into a library…
pauljervisheath
201
23k
Typedesign – Prime Four
hannesfritz
36
2.1k
It's Worth the Effort
3n
180
27k
Producing Creativity
orderedlist
PRO
338
39k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Building Your Own Lightsaber
phodgson
100
5.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Visualization
eitanlees
137
14k
Transcript
HTML5新特性
None
Fullscreen API • 该 允许开发者以编程方式将 应用程序全屏运行。 • 这个 不仅能够使整个页面全屏显示,也可以使页面 中的某个元素全屏显示。
• 设计初衷是为了全屏显示 视频和游戏,以便更全 面的替代 功能。
属性 事件 属性: • :当前全屏显示的 元素。 • :浏览器是否支持全屏( 暂不支持) •
:当前全屏状态 事件: • :全屏状态改变事件 (该事件要绑定在 上,该事件仅在全屏状态改变时触发,默认没有任何动作。 )
None
• 按“ ”键退出全屏。 • 调用“ ”方法退出全屏。
• 标准中,通过 伪 类对全屏的元素进行样式定义。 • 如果该元素全屏后,高度比屏幕还 高,超出的部分将会被隐藏。
注意: • 可以使任意元素全屏显示,不只是整个页面 • 全屏只能从事件触发(用户操作),而不能用代码直接触 发
None
• 页面可见性 就是表示网页可见还是不可见的。(是否 在当前激活 下,是否最小化)
属性 事件 属性: • 值,表示当前页面可见还是不可见 • 返回当前页面的可见状态。 事件: • 当可见状态改变时候触发的事件。
None
• 非可见状态下,动画静止;可见 状态下才正常播放动画。
好处 • 减少内存使用 停止或者暂停不可见页面的耗资源操作。 • 节省服务器资源 举例,当一个进行 轮询的页面不可见时,通过关闭轮询或者加大间隔时 间可以节省一定的服务器资源。 •
视频暂停和自动开始 视频或者动画、游戏 不只是 ,包括 动画 播放时如果需要切换 到其他页面,用户不再需要点暂停,而且切换到该页面时自动从中断点播放。 :
应用场景 • 视频网站广告、视频内容可见性切换与暂停。 • 登录状态同步。 • 在线聊天离开状态。
None
• 这个 能使 获取麦克风和摄像头的访问权限 • 结合 标签和 就能在浏览器中拍摄照片 • 去年编程马拉松获奖作品中大部分用了该
None
应用场景 • 人脸识别 、 物品识别 • 互动游戏 • 以图够物
None
• ,我们的 应用程序可以阅读,浏览,编辑和操 纵本地文件系统。 • 的目标在于满足没能从数据库获得很好服务的客户端 存储使用案例。这些应用一般处理大型二进制 和 或与浏览器 外部环境的应用共享数据。
目前支持的函数 • 读取操作文件: • 创建文件和写入文件, • 针对目录和文件系统的访问:
• 是一个经过良好测试的 封装,能 够方便 应用程序对自己的沙盒文件系统进行文件和文件夹的读写操作。 • 与其它封装库不同之处在于, 采用了不同的方法,它使用了大 家熟悉的 命令
。它的目标是让开发人员觉得 更加平易近人。 •
好处 • 可以在 里面放大量数据,将数据库操作改为本地文件存储。 • 可以在某种程度上提高了重要数据的安全性,一般用户如果没有操作 函数,是不能直接获取到该 文件的路径进而看到内容的。 • 文件格式的多样性,除了保存
文件之外,还可以保存多媒体文件 如 ,图片文件如 。
注意: • 没有对本地操作系统上面的文档文件夹和图片文件夹进行读写。 • 文件系统只能和你 所创建的经过沙盒处理的文件系统 进行交互。也就是说你也不能更改另一个 文件系统中的数 据。
None
• 该 能为应用提供私密沙箱文件存储系统 • 本地存储的数据能够通过链接至 的云备份 服务进行自动同步。
None
• •
表单
None