视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5支持性的检测（四种代码范例）

时间:2017-09-19 15:17酷播
在用HTML5开发Web App时，检测浏览器是否支持HTML5功能是个必须的步骤。检测浏览器是否支持HTML5功能，可归结为以下四种方式

在用HTML5开发Web App时，检测浏览器是否支持HTML5功能是个必须的步骤。检测浏览器是否支持HTML5功能，可归结为以下四种方式：

  • 在全局对象上检测属性；
  • 在创建的元素上检测属性；
  • 检测一个方法是否返回期望值；
  • 检测元素是否能保留值。

1. 在全局对象上检测属性

比如，检测离线功能的代码：

  1. <!doctype html> 
  2. <html lang="cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>applicationCache Test</title> 
  6.     <script> 
  7.         window.onload = function() { 
  8.             if (window.applicationCache) { 
  9.                 document.write("Yes, your browser can use offline web applications."); 
  10.             } else { 
  11.                 document.write("No, your browser cannot use offline web applications."); 
  12.             } 
  13.         } 
  14.     </script> 
  15. </head> 
  16. <body> 
  17.   
  18. </body> 
  19. </html> 

 2. 在创建的元素上检测属性

首先要创建一个元素，再检测其能否为DOM识别。比如，通过测试canvas元素的context属性，检测浏览器是否支持canvas元素：

  1. <!doctype html> 
  2. <html lang="cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Simple Square</title> 
  6.     <script type="text/javascript"> 
  7.         window.onload = drawSquare; 
  8.   
  9.         function drawSquare () { 
  10.             var canvas = document.getElementById('Simple.Square'); 
  11.             if (canvas.getContext) { 
  12.                 var context = canvas.getContext('2d'); 
  13.   
  14.                 context.fillStyle = "rgb(13, 118, 208)"; 
  15.                 context.fillRect(2, 2, 98, 98); 
  16.             } else { 
  17.                 alert("Canvas API requires an HTML5 compliant browser."); 
  18.             } 
  19.         } 
  20.     </script> 
  21. </head> 
  22. <body> 
  23.     <canvas id="Simple.Square" width="100" height="100"></canvas> 
  24. </body> 
  25. </html> 

3. 检测一个方法是否返回期望值

我们知道，浏览器对WebM、H.264的支持是不尽相同的。如何检测浏览器支持哪种编解码器？首先要像前面“2. 在创建的元素上检测属性”所述那样，先检测是否支持该元素（比如video），再检测方法是否返回期望值：

  1. <!doctype html> 
  2. <html lang="cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Video Test</title> 
  6.     <script> 
  7.         function videoCheck() { 
  8.             return !!document.createElement("video").canPlayType; 
  9.         } 
  10.   
  11.         function h264Check() { 
  12.             if (!videoCheck) { 
  13.             document.write("not"); 
  14.             return; 
  15.             } 
  16.   
  17.             var video = document.createElement("video"); 
  18.             if (!video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) { 
  19.                 document.write("not"); 
  20.             } 
  21.             return; 
  22.         } 
  23.   
  24.         document.write("Your browser does "); 
  25.         h264Check(); 
  26.         document.write(" support H.264 video."); 
  27.     </script> 
  28. </head> 
  29. <body> 
  30.   
  31. </body> 
  32. </html> 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器