不斷更新。

說明：主要記錄html5中的一些注意點(diǎn)或知識點(diǎn)，盡量不涉及具體語法信息。

一、CANVAS：

檢測：

try{
document.createElement("canvas").getContext("2d");
console.log("support"); }catch(e){console.log("not support"); }

典型應(yīng)用：熱力圖、玻璃窗（全頁玻璃窗，引導(dǎo)或記錄用戶行為）、游戲等

玻璃窗使用注意：

? ? 1. canvas的position:absolute; 必須指定大小，否則為0

? ? 2.canvas的 z-index需要大一些至頂層

? ? 3.會阻塞后續(xù)事件的訪問，不需要時(shí)應(yīng)關(guān)閉

使用注意：

? ? 1.繪制工作通常以原點(diǎn)為起點(diǎn)；

? ? 2.在展現(xiàn)圖像之前要先完成加載（圖像加載完成檢測）；

? ? 3.使用外部來源圖片時(shí)要小心，且不能對跨域引用的canvas對象使用getImageData等像素?cái)?shù)據(jù)操作函數(shù)，會拋出異常。

二、AUDIO/VIDEO

檢測video:

var hasVideo = !!(document.createElement("video").canPlayType);

檢測動態(tài)創(chuàng)建的video元素是否支持fooType類型視頻：

var supportsFooVideo = !!(document.createElement("video").canPlayType("fooType"));

video常見用法及功能：創(chuàng)建時(shí)序查看器、鼠標(biāo)懸停播放視頻。

容器文件（container）與 編解碼器（codec）:

? ? 1.視頻容器文件包含：視頻軌道、音頻軌道、元數(shù)據(jù)；支持：avi,flv,mp4,mkv,ovg格式；

? ? 2.編碼器是一組算法，用來解碼和編碼；音頻編解碼器：AAC,MPEG-3,OGG Vorbis;視頻編解碼器：H.264,VP8,Ogg Theora;

? ? 3.WebM視頻格式 -- 兼容

缺點(diǎn)：缺少通用編解碼器支持；

限制：

? ? 1.流式音頻和視頻，對視頻的支持只限于加載的全部媒體文件；

? ? 2.跨源(cross-orgin)資源共享限制；

? ? 3.全屏視頻無法通過腳本控制；

? ? 4.對audio和video元素的訪問尚未午安去鍵入規(guī)范中，基于流行字幕格式SRT的字幕支持規(guī)范（WebSRT）仍在編寫中。

注意：?如果開發(fā)人員有足夠的理由對頁面的音頻或視頻使用autoplay,一定要確保提供關(guān)閉自動播放的功能。

audio多備選源更好的兼容各種類型音頻：

<audio controls><source src = "low step up.ogg"><source src = "low step up.mp3">多備選源 </audio>

video特性：可被HTML5 Canvas調(diào)用，audio不可以。

audio/video演示（HTML5，不支持的瀏覽器無法演示）：

? ?1. audio: FF目前不支持mp3格式，所以播放器會閃一下消失。

? ??

? ? 2.video：

? ??

擴(kuò)展閱讀：（譯）html5中一個(gè)簡單mp3播放器的audio標(biāo)簽回退比你想象的要難

?

三、Geolocation API

檢測:

if(navigator.geolocation){console.log("support"); } else{console.log("not support"); }

應(yīng)用場景：商鋪位置共享、路程計(jì)算應(yīng)用、GPS導(dǎo)航社交網(wǎng)絡(luò)應(yīng)用；

兩種類型定位請求：單次定位請求和重復(fù)性位置更新請求；

位置信息來源及優(yōu)缺點(diǎn)比較：

?	位置信息來源	?	實(shí)現(xiàn)	優(yōu)點(diǎn)	缺點(diǎn)
1	IP	?	自動查找用戶的IP地址，檢索其注冊的無力地址	任何地方都可用、在服務(wù)器端處理	不精確（城市級）、運(yùn)算代價(jià)大
? ? ? ? ? ? ? 2	三維坐標(biāo)	GPS	收集GPS衛(wèi)星信號	精確	定位時(shí)間長（用戶耗電量大）、室內(nèi)效果不好、需要額外硬件設(shè)備
		RFID、WIFI、藍(lán)牙的MAC地址	到wifi接入點(diǎn)的三角距離計(jì)算	精確、可在室內(nèi)使用、可以簡單快捷定位	無線計(jì)入點(diǎn)少的地區(qū)效果不好（如鄉(xiāng)村）
		GSM或CDMA手機(jī)的ID	到基站的三角距離計(jì)算	相當(dāng)準(zhǔn)確、可在室內(nèi)使用、可以簡單快捷定位	需要能夠訪問手機(jī)或其modem的設(shè)備、在基站較少的偏遠(yuǎn)地區(qū)效果不好
3	用戶自定義數(shù)據(jù)	?	用戶輸入	更準(zhǔn)確、允許地理定位服務(wù)的結(jié)果作為備用位置信息、比自動檢測更快	可能很不準(zhǔn)確、特別是當(dāng)用戶位置改變后

隱私策略注意：

1、應(yīng)用程序不能直接訪問設(shè)備，只能請求瀏覽器來代表它訪問設(shè)備。

2、訪問/調(diào)用HTML5 Geolocation代碼會觸發(fā)隱私保護(hù)機(jī)制，不調(diào)用不觸發(fā)。

3、屬于敏感信息，如果用戶沒有授權(quán)存儲這些數(shù)據(jù)，應(yīng)在執(zhí)行任務(wù)完畢后刪除。

4、傳輸位置數(shù)據(jù)應(yīng)加密。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zldream1106/p/3369321.html

總結(jié)

以上是生活随笔為你收集整理的《HTML5高级程序设计》知识点概要（不涉及详细语法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。