手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:audio

备份一个video的JS

Submitted by gouki on 2012, February 16, 5:58 PM

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

借鉴一下。

Tags: html5, video, audio

Javascript | 评论:0 | 阅读:23535