H5_ 多媒体video，autio使用示例
生活随笔
收集整理的這篇文章主要介紹了
H5_ 多媒体video，autio使用示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>
?
總結
以上是生活随笔為你收集整理的H5_ 多媒体video，autio使用示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css代码整理
- 下一篇： Sublime Text 3 Mac常用