《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 ...
随机推荐
- [转]android自动弹出软键盘(输入键盘)
转自:http://www.devdiv.com/home.php?mod=space&uid=65729&do=blog&id=11847 很多应用中对于一个界面比如进入搜索 ...
- 使用Aspose.Cell控件实现Excel高难度报表的生成(三)
在之前几篇文章中,介绍了关于Apsose.cell这个强大的Excel操作控件的使用,相关文章如下: 使用Aspose.Cell控件实现Excel高难度报表的生成(一) 使用Aspose.Cell控件 ...
- JQuery:JQuery删除元素
JQuery:删除元素通过 jQuery,可以很容易地删除已有的 HTML 元素.删除元素/内容.如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其 ...
- delegate and event
事件是特殊的委托 委托:第一个方法注册用“=”,是赋值语法,因为要进行实例化,第二个方法注册则用的是“+=” 修饰符应该public的时候public,应该private的时候private 事件 ...
- Linux就这个范儿 第13章 打通任督二脉
Linux就这个范儿 第13章 打通任督二脉 0111010110……你有没有想过,数据从看得见或看不见的线缆上飞来飞去,是怎么实现的呢?数据传输业务的未来又在哪里?在前面两章中我们学习了Linux网 ...
- connect调用超时的实现方式
第二种更通用的.使connect调用超时的方法是使套接字成为无阻塞的,然后用select等待它完成.这种方法避免了使用alarm时遇到的很多问题,但我们必须承认,即使是在UNIX实现中,这种方法还是存 ...
- 百度地图API 简单示例
百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...
- js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...
- Http authentication(BASIC, DIGEST)
Http authentication....BASIC: In the context of an HTTP transaction, basic access authentication is ...
- Hadoop学习(3)-- 安装1.x版本
Hadoop有三种安装模式,分别为单机模式.伪分布式模式和完全分布式模式(集群模式).本文安装版本是hadoop-1.1.2,hadoop-2.x版本安装请参考:http://www.cnblogs. ...