html5高级 HTML5高级应用知识点总结

转载

网络安全守护神 2023-07-23 16:51:50

文章标签 html5高级 ide 加载编解码器 文章分类 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：

三、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	用户自定义数据		用户输入	更准确、允许地理定位服务的结果作为备用位置信息、比自动检测更快	可能很不准确、特别是当用户位置改变后