1.检测浏览器是否支持html5视频播放
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript"> 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 document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！" 18 } 19 else 20 { 21 if (h264Test=="probably") 22 { 23 document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！"; 24 } 25 else 26 { 27 document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！"; 28 } 29 } 30 } 31 else 32 { 33 if (oggTest=="probably") 34 { 35 document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！"; 36 } 37 else 38 { 39 document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！"; 40 } 41 } 42 } 43 else 44 { 45 document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！" 46 } 47 } 48 </script> 49 <title>3.3.1</title> 50 </head> 51 <body> 52 <div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;"> 53 <button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">检测</button> 54 </div> 55 </body> 56 </html>
2.视频里面的标签
1. autoplay 自动播放视频文件
1 <audio scc=".ogg .mp4 .webm" autoplay></span>
2.preload 预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件
<audio scc=".ogg .mp4 .webm" preload=”metadata”></audio>
3.poster元素
设置当前元素不可用时，可以向用户展现一副图片
<video scc=".ogg .mp4 .webm" poster=“.jpg”></video >
4.loop元素
设置是否循环播放视频文件
<video scc=".ogg .mp4 .webm" loop></ ideo >
5.controls属性
设置是否添加浏览器自带的播放控制器，其中包括播放、暂停、声音等。如果需要显示播放控制器，则添加该属性
<video scc=".ogg .mp4 .webm" controls></video >
6.width属性和height属性
设置视频的宽度和高度
<video scc=".ogg .mp4 .webm" width=”” height=””></video >
7.muted属性
设置页面加载时，播放器是否被静音。
3 vioeo/audio方法标签
1、play方法
除了播放器自己的播放功能外，用户还可以在脚本中使用play方法来控制音视频的播放功能
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3.5.1</title> 6 <script> 7 function play() 8 { 9 var video=document.getElementById("MyVideo"); 10 video.play(); 11 } 12 </script> 13 </head> 14 <body> 15 <video id="MyVideo" src="movie.mp4" controls></video> 16 <button onClick="play()">play</button> 17 </body> 18 </html>
显 示
2.pause方法
与play方法对应的pause方法用于设置暂停播放音视频功能，pause方法也需要在脚本中设置才能使用
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3.5.2</title> 6 <script> 7 function pause() 8 { 9 var video=document.getElementById("MyVideo"); 10 video.pause(); 11 } 12 </script> 13 </head> 14 <body> 15 <video id="MyVideo" src="movie.mp4" controls></video> 16 <button onClick="pause()">pause</button> 17 </body> 18 </html>
3.load方法
调用该方法可以重新加载音视频文件进行播放
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3.5.3</title> 6 <script> 7 function load() 8 { 9 var video=document.getElementById("MyVideo"); 10 video.load(); 11 } 12 </script> 13 </head> 14 <body> 15 <video id="MyVideo" src="movie.mp4" controls></video> 16 <button onClick="load()">load</button> 17 </body> 18 </html>
4.canPlayType方法
该方法用于检测浏览器是否支持指定的类型，并返回结果。如果返回空字符串则表示浏览器不支持此种功能
4.打开页面后，视频开始循环播放，当暂停时，在视频上方出现一个图片遮挡
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3.4.1</title> 6 <script> 7 var video; 8 var img; 9 function init() 10 { 11 video=document.getElementById("MyVideo"); 12 video.style.position="absolute"; 13 video.style.width="400px"; 14 video.style.height="300px"; 15 video.style.left="50px"; 16 video.style.top="50px"; 17 18 img=document.getElementById("MyImg"); 19 img.style.position="absolute"; 20 img.style.width="340px"; 21 img.style.height="160px"; 22 img.style.left="80px"; 23 img.style.top="120px"; 24 img.style.zIndex=2; 25 img.hidden=true; 26 } 27 function showImg(flag) 28 { 29 img.hidden=flag; 30 } 31 </script> 32 </head> 33 <body onLoad="init()"> 34 <video id="MyVideo" loop autoplay src="movie.mp4" controls onPlay="showImg(true);" onPause="showImg(false);" ></video> 35 <img id="MyImg" src="MyImage.png" /> 36 </body> 37 </html>
显示结果
