不斷更新。

說明：主要記錄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、傳輸位置數據應加密。

?

轉載于:https://www.cnblogs.com/zldream1106/p/3369321.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。