1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <!--判断浏览器是否支持HTML5视频-->
5 <script>
6 function checkVideo()
7 {
8 if(!!document.createElement('video').canPlayType)
9 {
10 var vidTest=document.createElement("video");
11 oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
12 if (!oggTest)
13 {
14 h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
15 if (!h264Test)
16 {
17 alert("Sorry. No video support.");
18 }
19 else
20 {
21 if (h264Test=="probably")
22 {
23 alert("Yes! Full support!");
24 }
25 else
26 {
27 alert("Well. Some support.");
28 }
29 }
30 }
31 else
32 {
33 if (oggTest=="probably")
34 {
35 alert("Yes! Full support!");
36 }
37 else
38 {
39 alert("Well. Some support.");
40 }
41 }
42 }
43 else
44 {
45 alert("Sorry. No video support.");
46 }
47 }
48 </script>
49 </head>
50 <body>
51 <button onclick="playOrPurse();">暂停/开始</button>
52 <button onclick="changeBigger();">放大</button>
53 <button onclick="changeSmaler();">缩小</button>
54 <button onclick="novoice();">静音</button>
55 <div>
56
57
58 <!--video标签-->
59 <video width="300" height="200" controls="controls" loop="loop" autoplay="autoplay" >
60 <!--autoplay有了，preload就被忽略。-->
61 <source src="test.ogg" type="video/ogg"> <!--1-->
62
63 <source src="mov_bbb.mp4" type='video/mp4'> <!--2-->
64 Your browser dose not support the video tag <!--3 <video> 与 </video> 之间插入的文本内容是供不支持 video 元素的浏览器显示的：-->
65 <!--浏览器只执行第一个本身能识别的tag
66 eg:谷歌可以识别ogg文件，执行1， 播放movie.ogg文件；
67 ie9以上不识别ogg，忽略第一个sourse，执行2，播放movie.MP4文件；
68 ie8及以下不支持video标签，页面显示第3句话-->
69 </video>
70 </div>
71 <!--audio标签,常用方法举例：-->
72 <div>
73 <audio controls="controls" loop="loop" autoplay >
74 <source src="./白月光.mp3" type="audio/mpeg">
75 <source src="./test.ogg" type="audio/ogg">
76
77 </audio>
78 </div>
79 <!--video标签,常用方法举例：-->
80 <script type="text/javascript">
81 checkVideo();
82 var vv=document.getElementById("v1");
83 function playOrPurse(){
84 if (vv.paused) { //暂定属性：paused
85 vv.play();
86 }else { //播放属性：played
87 vv.pause();
88 }
89 }
90 function changeBigger(){
91 vv.width += 30;
92 vv.height += 15;
93 }
94 function changeSmaler(){
95 vv.width -= 30;
96 vv.height -= 15;
97 }
98 function novoice(){
99 if(!vv.muted) {
100 vv.muted="muted";
101 }else {
102 vv.removeAtributte("muted");
103 }
104 }
105 </script>
106 </body>
107 </html>