《HTML5高级程序设计》知识点概要(不涉及详细语法)
不断更新。
说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息。
一、CANVAS:
检测:
try{
document.createElement("canvas").getContext("2d");
console.log("support");
}catch(e){
console.log("not support");
}
典型应用:热力图、玻璃窗(全页玻璃窗,引导或记录用户行为)、游戏等
玻璃窗使用注意:
1. canvas的position:absolute; 必须指定大小,否则为0
2.canvas的 z-index需要大一些至顶层
3.会阻塞后续事件的访问,不需要时应关闭
使用注意:
1.绘制工作通常以原点为起点;
2.在展现图像之前要先完成加载(图像加载完成检测);
3.使用外部来源图片时要小心,且不能对跨域引用的canvas对象使用getImageData等像素数据操作函数,会抛出异常。
二、AUDIO/VIDEO
检测video:
var hasVideo = !!(document.createElement("video").canPlayType);
检测动态创建的video元素是否支持fooType类型视频:
var supportsFooVideo = !!(document.createElement("video").canPlayType("fooType"));
video常见用法及功能:创建时序查看器、鼠标悬停播放视频。
容器文件(container)与 编解码器(codec):
1.视频容器文件包含:视频轨道、音频轨道、元数据;支持:avi,flv,mp4,mkv,ovg格式;
2.编码器是一组算法,用来解码和编码;音频编解码器:AAC,MPEG-3,OGG Vorbis;视频编解码器:H.264,VP8,Ogg Theora;
3.WebM视频格式 -- 兼容
缺点:缺少通用编解码器支持;
限制:
1.流式音频和视频,对视频的支持只限于加载的全部媒体文件;
2.跨源(cross-orgin)资源共享限制;
3.全屏视频无法通过脚本控制;
4.对audio和video元素的访问尚未午安去键入规范中,基于流行字幕格式SRT的字幕支持规范(WebSRT)仍在编写中。
注意: 如果开发人员有足够的理由对页面的音频或视频使用autoplay,一定要确保提供关闭自动播放的功能。
audio多备选源更好的兼容各种类型音频:
<audio controls>
<source src = "low step up.ogg">
<source src = "low step up.mp3">
多备选源
</audio>
video特性:可被HTML5 Canvas调用,audio不可以。
audio/video演示(HTML5,不支持的浏览器无法演示):
1. audio: FF目前不支持mp3格式,所以播放器会闪一下消失。
2.video:
扩展阅读:(译)html5中一个简单mp3播放器的audio标签回退比你想象的要难
三、Geolocation API
检测:
if(navigator.geolocation){
console.log("support");
} else{
console.log("not support");
}
应用场景:商铺位置共享、路程计算应用、GPS导航社交网络应用;
两种类型定位请求:单次定位请求和重复性位置更新请求;
位置信息来源及优缺点比较:
位置信息来源 | 实现 | 优点 | 缺点 | ||
1 | IP | 自动查找用户的IP地址,检索其注册的无力地址 | 任何地方都可用、在服务器端处理 | 不精确(城市级)、运算代价大 | |
2 | 三维坐标 | GPS | 收集GPS卫星信号 | 精确 | 定位时间长(用户耗电量大)、室内效果不好、需要额外硬件设备 |
RFID、WIFI、蓝牙的MAC地址 | 到wifi接入点的三角距离计算 | 精确、可在室内使用、可以简单快捷定位 | 无线计入点少的地区效果不好(如乡村) | ||
GSM或CDMA手机的ID | 到基站的三角距离计算 | 相当准确、可在室内使用、可以简单快捷定位 | 需要能够访问手机或其modem的设备、在基站较少的偏远地区效果不好 | ||
3 | 用户自定义数据 | 用户输入 | 更准确、允许地理定位服务的结果作为备用位置信息、比自动检测更快 | 可能很不准确、特别是当用户位置改变后 |
隐私策略注意:
1、应用程序不能直接访问设备,只能请求浏览器来代表它访问设备。
2、访问/调用HTML5 Geolocation代码会触发隐私保护机制,不调用不触发。
3、属于敏感信息,如果用户没有授权存储这些数据,应在执行任务完毕后删除。
4、传输位置数据应加密。
《HTML5高级程序设计》知识点概要(不涉及详细语法)的更多相关文章
- 《HTML5 高级程序设计》
第一章 HTML5 概述 开发 HTML5 的组织 Web Hypertext Application Technology Working Group (WHATWG):开发 HTML 和 Web ...
- JavaScript高级程序设计(第4版)知识点总结
介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...
- [ASP.NET MVC 大牛之路]03 - C#高级知识点概要(2) - 线程和并发
本人博客已转移至:http://www.exblr.com/liam 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验给大家一些指引,带着大家一起 ...
- C#高级知识点概要(2) - 线程和并发
原文地址:http://www.cnblogs.com/Leo_wl/p/4192935.html 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验 ...
- javascript高级程序设计第二章知识点提炼
这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.
- 1 《JavaScript高级程序设计》学习笔记(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- html5高级
Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...
随机推荐
- 【转】Http Cache最基本的一些东西
Http Cache最基本的一些东西 Cache浏览器IEwebkitApache Http的Cache机制总共有4个组成部分: Cache-Control: max-age=N(seconds) ...
- 一个短小的JS函数,用来得到仅仅包含不重复元素的数组
下面函数主要利用了数组的sort方法,之后的逻辑是看最后一个元素是否等于要添加的元素,如果不是就往尾后加. 这个做法的效率等于sort方法的效率,还过得去. 代码: <!DOCTYPE HTML ...
- DDS杂散频谱来源:谐波超Nyquist 折返
- CFBundleVersion与CFBundleShortVersionString
CFBundleVersion,标识(发布或未发布)的内部版本号.这是一个单调增加的字符串,包括一个或多个时期分隔的整数. CFBundleShortVersionString 标识应用程序的发布版 ...
- iOS:城市级联列表的使用
1.介绍: 现在越来越多的项目都用到了地址,尤其是电商O2O的购物平台,我之前做的教育产品和电商产品都用到了,而实现地址的设置用到的技术就是城市级联列表,即普遍的做法就是自定义选择器控件UIPicke ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- 11月09日《奥威Power-BI vs微软Power BI》腾讯课堂开课啦
上过奥威公开课的同学可能有一个疑问:奥威Power-BI和微软Power BI是同一个吗,为什么叫同样的名字?正如这个世界上有很多个John.Jack.Marry…一样,奥威Power-BI和微软Po ...
- D3D标注动态避让
原来也思考了该如何实现标注动态避让,认为必须得计算字符串所占的大小.如果在屏幕上要计算屏幕象素之类的东西. 今天总算找到了实现方法,在C# WorldWind中的KMLImporter类中有.关键是F ...
- [GDAL]读取HDF格式的calipso数据
探测地球云层分布的CloudSat和CALIPSO卫星 http://www.nasa.gov/mission_pages/calipso/main/index.html http://www.nas ...
- 一个NULL引发的血案
go sql.stmt query 发生了一个NULL值,所以发现了error, 发现服务不停的初始化sql stmt, 导致连接数过多,服务就变得很慢. 首先,我在初始化的之前,要判断这个是否是NU ...