不断更新。

说明:主要记录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. 【转】Http Cache最基本的一些东西

    Http Cache最基本的一些东西 Cache浏览器IEwebkitApache  Http的Cache机制总共有4个组成部分: Cache-Control: max-age=N(seconds)  ...

  2. 一个短小的JS函数,用来得到仅仅包含不重复元素的数组

    下面函数主要利用了数组的sort方法,之后的逻辑是看最后一个元素是否等于要添加的元素,如果不是就往尾后加. 这个做法的效率等于sort方法的效率,还过得去. 代码: <!DOCTYPE HTML ...

  3. DDS杂散频谱来源:谐波超Nyquist 折返

  4. CFBundleVersion与CFBundleShortVersionString

    CFBundleVersion,标识(发布或未发布)的内部版本号.这是一个单调增加的字符串,包括一个或多个时期分隔的整数. CFBundleShortVersionString  标识应用程序的发布版 ...

  5. iOS:城市级联列表的使用

    1.介绍: 现在越来越多的项目都用到了地址,尤其是电商O2O的购物平台,我之前做的教育产品和电商产品都用到了,而实现地址的设置用到的技术就是城市级联列表,即普遍的做法就是自定义选择器控件UIPicke ...

  6. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  7. 11月09日《奥威Power-BI vs微软Power BI》腾讯课堂开课啦

    上过奥威公开课的同学可能有一个疑问:奥威Power-BI和微软Power BI是同一个吗,为什么叫同样的名字?正如这个世界上有很多个John.Jack.Marry…一样,奥威Power-BI和微软Po ...

  8. D3D标注动态避让

    原来也思考了该如何实现标注动态避让,认为必须得计算字符串所占的大小.如果在屏幕上要计算屏幕象素之类的东西. 今天总算找到了实现方法,在C# WorldWind中的KMLImporter类中有.关键是F ...

  9. [GDAL]读取HDF格式的calipso数据

    探测地球云层分布的CloudSat和CALIPSO卫星 http://www.nasa.gov/mission_pages/calipso/main/index.html http://www.nas ...

  10. 一个NULL引发的血案

    go sql.stmt query 发生了一个NULL值,所以发现了error, 发现服务不停的初始化sql stmt, 导致连接数过多,服务就变得很慢. 首先,我在初始化的之前,要判断这个是否是NU ...