Video.js事件

Home

膘叔 » Archives

文章: 备份一个video的JS [打印]

分类: Javascript

作者: gouki

2012-02-16 17:58

备份一个JS，不是为了代码很优秀，而是。。。想直接用里面的事件，就当成参考了：

JavaScript代码

1. var media_events=new Array();
2. // was extracted from the spec in November 2011
3. media_events["loadstart"]=0;
4. media_events["progress"]=0;
5. media_events["suspend"]=0;
6. media_events["abort"]=0;
7. media_events["error"]=0;
8. media_events["emptied"]=0;
9. media_events["stalled"]=0;
10. media_events["loadedmetadata"]=0;
11. media_events["loadeddata"]=0;
12. media_events["canplay"]=0;
13. media_events["canplaythrough"]=0;
14. media_events["playing"]=0;
15. media_events["waiting"]=0;
16. media_events["seeking"]=0;
17. media_events["seeked"]=0;
18. media_events["ended"]=0;
19. media_events["durationchange"]=0;
20. media_events["timeupdate"]=0;
21. media_events["play"]=0;
22. media_events["pause"]=0;
23. media_events["ratechange"]=0;
24. media_events["volumechange"]=0;
25. var media_controller_events=new Array();
26. // was extracted from the spec in November 2011
27. media_controller_events["emptied"]=0;
28. media_controller_events["loadedmetadata"]=0;
29. media_controller_events["loadeddata"]=0;
30. media_controller_events["canplay"]=0;
31. media_controller_events["canplaythrough"]=0;
32. media_controller_events["playing"]=0;
33. media_controller_events["ended"]=0;
34. media_controller_events["waiting"]=0;
35. media_controller_events["durationchange"]=0;
36. media_controller_events["timeupdate"]=0;
37. media_controller_events["play"]=0;
38. media_controller_events["pause"]=0;
39. media_controller_events["ratechange"]=0;
40. media_controller_events["volumechange"]=0;
41. // was extracted from the spec in November 2011
42. var media_properties=[ "error","src","currentSrc","crossOrigin","networkState","preload","buffered","readyState","seeking","currentTime","initialTime","duration","startOffsetTime","paused","defaultPlaybackRate","playbackRate","played","seekable","ended","autoplay","loop","mediaGroup","controller","controls","volume","muted","defaultMuted","audioTracks","videoTracks","textTracks","width","height","videoWidth","videoHeight","poster" ];
43. var media_properties_elts=null;
44. var webm=null;
45. function init(){
46. document._video=document.getElementById("video");
47. webm=document.getElementById("webm");
48. init_events();
49. init_properties();
50. init_mediatypes();
51. // properties are updated even if no event was triggered
52. setInterval(update_properties,500);
53. }
54. document.addEventListener("DOMContentLoaded",init,false);
55. function init_events(){
56. for(key in media_events){
57. document._video.addEventListener(key,capture,false);
58. }
59. var tbody=document.getElementById("events");
60. var i=1;
61. var tr=null;
62. for(key in media_events){
63. if(tr==null) tr=document.createElement("tr");
64. var th=document.createElement("th");
65. th.textContent=key;
66. var td=document.createElement("td");
67. td.setAttribute("id","e_"+key);
68. td.innerHTML="0";
69. td.className="false";
70. tr.appendChild(th);
71. tr.appendChild(td);
72. if((i++%5)==0){
73. tbody.appendChild(tr);
74. tr=null;
75. }
76. }
77. if(tr!=null) tbody.appendChild(tr);
78. }
79. function init_properties(){
80. var tbody=document.getElementById("properties");
81. var i=0;
82. var tr=null;
83. media_properties_elts=new Array(media_properties.length);
84. do{
85. if(tr==null) tr=document.createElement("tr");
86. var th=document.createElement("th");
87. th.textContent=media_properties[i];
88. var td=document.createElement("td");
89. td.setAttribute("id","p_"+media_properties[i]);
90. var r=eval("document._video."+media_properties[i]);
91. td.innerHTML=r;
92. if(typeof(r)!="undefined"){
93. td.className="true";
94. }else{
95. td.className="false";
96. }
97. tr.appendChild(th);
98. tr.appendChild(td);
99. media_properties_elts[i]=td;
100. if((++i%3)==0){
101. tbody.appendChild(tr);
102. tr=null;
103. }
104. }while(i<media_properties.length);
105. if(tr!=null) tbody.appendChild(tr);
106. }
107. function init_mediatypes(){
108. var tbody=document.getElementById("m_video");
109. var i=0;
110. var tr=document.createElement("tr");
111. var videoTypes=[ "video/ogg","video/mp4","video/webm" ];
112. i=0;
113. tr=document.createElement("tr");
114. do{
115. var td=document.createElement("th");
116. td.innerHTML=videoTypes[i];
117. tr.appendChild(td);
118. }while(++i<videoTypes.length);
119. tbody.appendChild(tr);
120. i=0;
121. tr=document.createElement("tr");
122. if(!!document._video.canPlayType){
123. do{
124. var td=document.createElement("td");
125. var support=document._video.canPlayType(videoTypes[i]);
126. td.innerHTML='"'+support+'"';
127. if(support==="maybe"){
128. td.className="true";
129. }else if(support===""){
130. td.className="false";
131. }
132. tr.appendChild(td);
133. }while(++i<videoTypes.length);
134. tbody.appendChild(tr);
135. }
136. }
137. function capture(event){
138. media_events[event.type]=media_events[event.type]+1;
139. for(key in media_events){
140. var e=document.getElementById("e_"+key);
141. if(e){
142. e.innerHTML=media_events[key];
143. if(media_events[key]>0) e.className="true";
144. }
145. }
146. update_properties();
147. }
148. function update_properties(){
149. var i=0;
150. for(key in media_properties){
151. var val=eval("document._video."+media_properties[key]);
152. /*
153. if (typeof val === "TimesRanges") {
154. val = val.length + " TimeRanges";
155. }
156. */
157. media_properties_elts[i++].innerHTML=val;
158. }
159. if(!!document._video.audioTracks){
160. var td=document.getElementById("m_audiotracks");
161. td.innerHTML=document._video.audioTracks.length;
162. td.className="true";
163. }
164. if(!!document._video.videoTracks){
165. var td=document.getElementById("m_videotracks");
166. td.innerHTML=document._video.videoTracks.length;
167. td.className="true";
168. }
169. if(!!document._video.textTracks){
170. var td=document.getElementById("m_texttracks");
171. td.innerHTML=document._video.textTracks.length;
172. td.className="true";
173. }
174. }
175. var videos=new Array();
176. videos[0]=[
177. "http://media.w3.org/2010/05/sintel/poster.png","http://media.w3.org/2010/05/sintel/trailer.mp4","http://media.w3.org/2010/05/sintel/trailer.ogv","http://media.w3.org/2010/05/sintel/trailer.webm"
178. ];
179. videos[1]=[
180. "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/trailer.mp4","http://media.w3.org/2010/05/bunny/trailer.ogv"
181. ];
182. videos[2]=[
183. "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/movie.mp4","http://media.w3.org/2010/05/bunny/movie.ogv"
184. ];
185. videos[3]=[
186. "http://media.w3.org/2010/05/video/poster.png","http://media.w3.org/2010/05/video/movie_300.mp4","http://media.w3.org/2010/05/video/movie_300.ogv","http://media.w3.org/2010/05/video/movie_300.webm"
187. ];
188. function switchVideo(n){
189. if(n>=videos.length) n=0;
190. var mp4=document.getElementById("mp4");
191. var ogv=document.getElementById("ogv");
192. var parent=ogv.parentNode;
193. document._video.setAttribute("poster",videos[n][0]);
194. mp4.setAttribute("src",videos[n][1]);
195. ogv.setAttribute("src",videos[n][2]);
196. if(videos[n][3]){
197. if(webm.parentNode==null){
198. parent.insertBefore(webm,ogv);
199. }
200. webm.setAttribute("src",videos[n][3]);
201. }else{
202. if(webm.parentNode!=null){
203. parent.removeChild(webm);
204. }
205. }
206. document._video.load();
207. }

这一段JS是从http://www.w3.org/2010/05/video/mediaevents.html拷贝而来，具体的演示就在这个页面了。我是想知道video标签中的一些事件。controller_event几乎用不到。 中文说明这里有：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

XML/HTML代码

1. //错误状态
2. Media.error; //null:正常
3. Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
4. //网络状态
5. Media.currentSrc; //返回当前资源的URL
6. Media.src = value; //返回或设置当前资源的URL
7. Media.canPlayType(type); //是否能播放某种格式的资源
8. Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源
9. Media.load(); //重新加载src指定的资源
10. Media.buffered; //返回已缓冲区域，TimeRanges
11. Media.preload; //none:不预载 metadata:预载资源信息 auto:
12. //准备状态
13. Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
14. Media.seeking; //是否正在seeking
15. //回放状态
16. Media.currentTime = value; //当前播放的位置，赋值可改变位置
17. Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
18. Media.duration; //当前资源长度 流返回无限
19. Media.paused; //是否暂停
20. Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
21. Media.playbackRate = value;//当前播放速度，设置后马上改变
22. Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
23. Media.seekable; //返回可以seek的区域 TimeRanges
24. Media.ended; //是否结束
25. Media.autoPlay; //是否自动播放
26. Media.loop; //是否循环播放
27. Media.play();    //播放
28. Media.pause();   //暂停
29. //控制
30. Media.controls;//是否有默认控制条
31. Media.volume = value; //音量
32. Media.muted = value; //静音
33. //TimeRanges(区域)对象
34. TimeRanges.length; //区域段数
35. TimeRanges.start(index) //第index段区域的开始位置
36. TimeRanges.end(index) //第index段区域的结束位置

借鉴一下。

标签: html5, video, audio

---

Powered by SaBlog-X (C) 2003-2005 Security Angel Team. XHTML 1.0