HTML5 多媒体video，autio使用示例
程序员文章站
2022-07-09 18:04:24
1 2 3 4 5 AV 6 7 8 9 注意:audio标签设置controls="controls"才可以再页面中显示 10 IE9开始支持 11 12 13 不支持audio 14 ... ......
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AV</title>
6 </head>
7 <body>
8 <div class="content">
9 <p>注意:audio标签设置controls="controls"才可以再页面中显示</p>
10 <p>IE9开始支持</p>
11 <div class="audio">
12 <audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>
13 不支持audio
14 </audio>
15 </div>
16 <div class="video">
17 <video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">
18 不支持video
19 </video>
20 </div>
21 <div class="networkState"></div>
22 <button id="getVideoURL">getVideoURL</button>
23 <button id="palyVideo">palyVideo</button>
24 <button id="pauseVideo">pauseVideo</button>
25 </div>
26 <script>
27 var page = {
28 init : function(){
29 this.listener();
30 },
31 listener : function(){
32 var video = document.getElementById('videoElement');
33
34 //error属性：不能正常读取，使用媒体数据
35 video.addEventListener('error', function(){
36 var error = video.error;
37 switch(error.code){
38 case 1 :
39 alert("视频的下载过程被中止");
40 break;
41 case 2 :
42 alert("网络发生故障，视频的下载过程被中止");
43 break;
44 case 3 :
45 alert('解码失败');
46 break;
47 case 4 :
48 alert("媒体资源不可用或是媒体格式不被支持");
49 }
50 },false);
51
52
53 //networkState属性:加载过程使用networkState属性读取当前网络状态
54 video.addEventListener('progress',function(e){
55 var networkStateDisplay = document.getElementById('networkState');
56 if(video.networkState === 2){
57 //计算已加载的字节数与总字节数
58 networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";
59 }
60 else if(video.networkState === 3){
61 networkStateDisplay.innerHTML = "加载失败";
62 }
63 },false);
64
65 //使用currentSrc属性：读取媒体数据的URL地址(只读)
66 var videoURL = video.currentSrc,
67 videoURLBtn = document.getElementById('getVideoURL');
68 videoURLBtn.onclick = function(){
69 //这里是空的，还不知道为什么???
70 console.log(videoURL);
71 }
72 //buffered属性
73
74 //readState属性
75
76 //seeking属性与seekable属性
77
78 //currenTime属性
79 //startTime属性
80
81 //duration属性
82
83 //play属性(开始时间,结束时间)
84 //paused属性(true_暂停，false_播放)
85 //ended属性(true_播放完毕，false_未完毕)
86
87 //defaultPlaybackRate,playbackRate属性
88
89 //volume,muted属性
90
91 /*
92 方法：
93 play(),播放
94 pause(),暂停
95 load(),重新载入
96 */
97
98 //监听视频播放结束事件
99 //注意这里不设置loop循环播放
100 video.addEventListener('ended',function(){
101 alert("播放结束");
102 },true)
103
104 var palyVideoBtn = document.getElementById('palyVideo'),
105 pauseVideoBtn = document.getElementById('pauseVideo');
106 //播放视频play()
107 palyVideoBtn.onclick = function(){
108 video.play();
109 }
110 //暂停视频pause()
111 pauseVideoBtn.onclick = function(){
112 video.pause();
113 }
114
115 /*
116 canPlayType方法:
117 空字符串——不支持
118 maybe——可能支持
119 probably：支持
120 */
121 var support = video.canPlayType("video/mp4");
122 console.log(support);//maybe
123
124 /*
125 在媒体读取和播放的过程中，还有一系列的事件。
126 对这些事件的捕捉：
127 (1)监听的方式
128 (2)获取事件句柄
129 */
130
131 }
132 }
133 window.onload = page.init();
134 </script>
135 </body>
136 </html>
上一篇： jQuery中each方法的使用详解
下一篇： vue移动端UI框架实现QQ侧边菜单组件