• Video.js事件

    文章: 备份一个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. //网络状态  
    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段区域的结束位置  

    借鉴一下。

    标签: html5, video, audio
  • 相关阅读:
    003_硬件基础电路_LM2596
    002_硬件基础电路_7805电路
    007_软件安装之_串口屏软件
    006_软件安装之_Proteus 8.6 SP2 Professional
    jquery最快速入门文档
    CSS的属性与选择器
    mysql的使用
    python协程的使用
    python线程与进程
    python爬虫学习第六章
  • 原文地址：https://www.cnblogs.com/mingyongcheng/p/4067100.html
Copyright © 2020-2023  润新知