检测您的浏览器是否支持 HTML5 视频方法

2022-05-06 10:55:17 浏览数 (1)

在http://www.w3school.com.cn学习html5的时候,看到一个检测您的浏览器是否支持 HTML5 视频的方法:

运行效果:

1.在EditPlus中运行

2.在chrome浏览器中运行

=======================================================

代码部分:

=======================================================

代码语言:javascript复制
 1 <!DUCTYPE HTML>
 2 <html>
 3 
 4 <script type="text/javascript"> 
 5 function checkVideo()
 6 {
 7 if(!!document.createElement('video').canPlayType)
 8   {
 9   var vidTest=document.createElement("video");
10   oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
11   if (!oggTest)
12     {
13     h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
14     if (!h264Test)
15       {
16       document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
17       }
18     else
19       {
20       if (h264Test=="probably")
21         {
22         document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
23         }
24       else
25         {
26         document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
27         }
28       }
29     }
30   else
31     {
32     if (oggTest=="probably")
33       {
34       document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
35       }
36     else
37       {
38       document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
39       }
40     }
41   }
42 else
43   {
44   document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
45   }
46 }
47 </script>
48 
49 <body>
50 
51 <p>检测您的浏览器是否支持 HTML5 视频:</p>
52 
53 <div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
54 <button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">Check</button>
55 </div>
56 
57 </body>
58 </html>

0 人点赞