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 id="v1" 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>