不断更新。

说明:主要记录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高级程序设计》知识点概要(不涉及详细语法)的更多相关文章

  1. 《HTML5 高级程序设计》

    第一章 HTML5 概述 开发 HTML5 的组织 Web Hypertext Application Technology Working Group (WHATWG):开发 HTML 和 Web ...

  2. JavaScript高级程序设计(第4版)知识点总结

    介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...

  3. [ASP.NET MVC 大牛之路]03 - C#高级知识点概要(2) - 线程和并发

    本人博客已转移至:http://www.exblr.com/liam  我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验给大家一些指引,带着大家一起 ...

  4. C#高级知识点概要(2) - 线程和并发

    原文地址:http://www.cnblogs.com/Leo_wl/p/4192935.html 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验 ...

  5. javascript高级程序设计第二章知识点提炼

    这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.

  6. 1 《JavaScript高级程序设计》学习笔记(1)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...

  7. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  8. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  9. html5高级

    Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...

随机推荐

  1. [转]android自动弹出软键盘(输入键盘)

    转自:http://www.devdiv.com/home.php?mod=space&uid=65729&do=blog&id=11847 很多应用中对于一个界面比如进入搜索 ...

  2. 使用Aspose.Cell控件实现Excel高难度报表的生成(三)

    在之前几篇文章中,介绍了关于Apsose.cell这个强大的Excel操作控件的使用,相关文章如下: 使用Aspose.Cell控件实现Excel高难度报表的生成(一) 使用Aspose.Cell控件 ...

  3. JQuery:JQuery删除元素

    JQuery:删除元素通过 jQuery,可以很容易地删除已有的 HTML 元素.删除元素/内容.如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其 ...

  4. delegate and event

    事件是特殊的委托 委托:第一个方法注册用“=”,是赋值语法,因为要进行实例化,第二个方法注册则用的是“+=”   修饰符应该public的时候public,应该private的时候private 事件 ...

  5. Linux就这个范儿 第13章 打通任督二脉

    Linux就这个范儿 第13章 打通任督二脉 0111010110……你有没有想过,数据从看得见或看不见的线缆上飞来飞去,是怎么实现的呢?数据传输业务的未来又在哪里?在前面两章中我们学习了Linux网 ...

  6. connect调用超时的实现方式

    第二种更通用的.使connect调用超时的方法是使套接字成为无阻塞的,然后用select等待它完成.这种方法避免了使用alarm时遇到的很多问题,但我们必须承认,即使是在UNIX实现中,这种方法还是存 ...

  7. 百度地图API 简单示例

    百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...

  8. js DOM 元素ID就是全局变量

    有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...

  9. Http authentication(BASIC, DIGEST)

    Http authentication....BASIC: In the context of an HTTP transaction, basic access authentication is ...

  10. Hadoop学习(3)-- 安装1.x版本

    Hadoop有三种安装模式,分别为单机模式.伪分布式模式和完全分布式模式(集群模式).本文安装版本是hadoop-1.1.2,hadoop-2.x版本安装请参考:http://www.cnblogs. ...