针对不同的浏览器，以及android的不同版本的webview对html支持的不一致（android平台中有很多仅仅支持HTML5的节点，但是却不能正常工作），我们需要做出一些检测，根据结果处理不同的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script type="text/javascript">
function supportVideo() {
return !!document.createElement("video").canPlayType;
}
function supportCanvas() {
return !!document.createElement("canvas").getContext;
}
/**
* 检查是否支持本地存储(Local Storage)
*/
function supportLocalStorage() {
return (‘localStorage’ in window) && window[‘localStorage’] != null;
}
/**
* 检查是否支持Web Workers
*/
function supportWebWorkers() {
return window.Worker;
}
/**
* 检查是否支持离线web应用
*/
function supportOffLine() {
return !!window.applicationCache;
}
/**
* 检查是否支持地理位置(Geolocation)
*/
function supportGeolocation() {
return !!navigator.geolocation;
}
/**
* 检查是否支持画布文本(Canvas Text)
*/
function supportCanvasText() {
if (!supportCanvas) {
return false;
}
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
return typeof context.fillText == "function";
}
/**
* 检查是否支持MP4
*/
function support_h264BaseLine_VideoFormats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/mp4;codecs=’avc1.42E01E,mp4a.40.2’")
}
/**
* 检查是否支持ogg
*/
function support_ogg_theora_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/ogg;codecs=’theora,vorbis’")
}
/**
* 检查是否支持webM
*/
function support_webM_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/webm;codecs=’vp8,vorbis’")
}
</script>

还可以使用检测插件Moderniz， Moderniz是一个开源的js类库，用于检测浏览器是否支持html5及css3特性；在页面引用后，会创建对应的全局对象，并开放 对应特性 是否支持的属性，我们可以直接进行访问对应属性，就可以知道是否支持某特性了.