HTML5视频播放

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>

显示结果