《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、传输位置数据应加密。

转载于:https://www.cnblogs.com/zldream1106/p/3369321.html

《HTML5高级程序设计》知识点概要（不涉及详细语法）相关推荐

javascript高级程序设计pdf_一个老牌程序员推荐的JavaScript的书籍,看了真的不后悔!...
很多人问我怎么学前端?我的回答是:读书吧!相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高.而如果深一脚浅一脚的学习,写出代码的质量 ...
ajax高级程序设计_javascript高级程序设计核心知识总结
此文是对js高级程序设计一书难点的总结,也是笔者在看了3遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 js基本的数据类型和关键点变量,作用域和内存问题垃圾 ...
JavaScript高级程序设计第四版学习--第二十四章
title: JavaScript高级程序设计第四版学习–第二十四章 date: 2021-5-31 10:46:01 author: Xilong88 tags: JavaScript 本章内容: ...
JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
《javascript高级程序设计》笔记：内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承近几篇博客都会围绕着图中的知识点展开由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
Ext JS高级程序设计
Ext JS高级程序设计图书详细情况查看: http://www.china-pub.com/193076 市场价 :￥59.00 会员价 : ￥44.25(75折) [作者]黄灯桥;徐会生 [同 ...
javascript 高级程序设计_重读《JavaScript高级程序设计》
最近自己在休假,打算闭门几天将<JavaScript高级程序设计>(第3版)这本良心教材再回顾一遍.目前自己进入前端领域两年多,现在重读并记录下这本教材的"硬"知识点 ...

《HTML5高级程序设计》知识点概要（不涉及详细语法）

《HTML5高级程序设计》知识点概要（不涉及详细语法）相关推荐

最新文章

热门文章