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

备份一个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 | 阅读:25465

TIPS：关掉本站所有显示微博的插件

Submitted by gouki on 2012, February 15, 9:48 AM

不好意思，关闭本站所有显示微博的插件。
其实，这也无可奈何，当然，大家也都明白，等到实名制之后，象我们这些不实名的，几乎也不能够发表微博了，这个时候如果你让关注我，或者看我的微博，您觉得还有意义吗？
与其浪费大家的资源，不如我早日关闭，当然如果您认为自己是一个潜水员，自然可以继续。
我的微博地址是：
http://weibo.com/neatstudio
http://t.qq.com/goukixiao
----------------------------------
3-16开始倒记时，当打假打完后就该打人了。您懂的

Misc | 评论:1 | 阅读:14668

情人节快乐

Submitted by gouki on 2012, February 14, 9:35 PM

众所周知的日子，也是传说中杜蕾斯姐姐和杰士帮哥哥伤亡率最高的日子。
微博上各种各样的段子也是非常的有意思，我在这里就不再一一贴了，反正再过几天这些活跃人士也会变成无语人士的。何必呢。HOHO
情人节的由来我也不贴了，这玩意大家都知道，我就不装了。装了也没意思。反正今天就是那样了。
今天的花，死了不少。
从明天起，小姑娘又少了不少。
MD，我这是不是在嫉妒？青春不在啊。。。。。
今天下午，恭喜各个旅馆生意兴隆，各大超市销量超好

Tags: 情人节

Misc | 评论:1 | 阅读:16342

yii 镜像

Submitted by gouki on 2012, February 13, 1:42 PM

Yii Framework有的时候会很容易就被墙。所以，自己给他做了一个反向代理 .
每个月5G流量。访问地址为: http://yii.neatcn.com(跳转)

这样的功能，当然不是我做的。我没有那么多的精力来做这个，我是用了一个现成的网站（Speedy Mirror）处理的。

很方便，这里有一篇中文教程：http://www.ml934.com/archives/204.html

我们知道Speedy Mirror是 一家免费CDN加速服务网站，服务器节点分布在英美，感觉用它给国内的网站做加速意义不大。所以这里只谈用SpeedMirror为GAE做“反向代 理”，准确的说就是做了一个“镜像网站”。我们知道由于GAE被墙，appspot.com是不能在国内访问的，这就导致以GAE做为平台的各种应用无法 正常使用和访问，比如在GAE上搭建的博客，相册，网盘等等。这里我们就正好可以利用其CDN的特性，为你的GAE 站点做个镜像，当我们访问xxxx.appspot.com的时候，就会从Speedy Mirror的服务器上获取缓存内容。Speedy Mirror支持https访问，使用简单，注册后只需填写你要推送的网址，完成设置立刻生效。

先添加一个你喜欢的名称，再填写你要推送的网址，点击Detect and save确定就可以了。然后就会给你一个xxxx.speedymirror.com二级域名（下图，可点击放大查看）

Speedy Mirror默认的缓存更新是7天，你要是更新频繁，你就点击xxxx.speedymirror.com把缓存更新改为1即可。点击Add new mirror，再新添加一个镜像就可以了哦，怎么样？够简单吧，那就时间起来吧，呵呵。

PS：GAE虽然可以通过APPs企业套件绑定域名的方法实现墙内访问，但对于新手来说，步骤繁琐，且反向代理也不好找，远不如 Speedy Mirror简单。唯一的缺憾就是speedymirror.com这个域名太不好记了，简直有点坑爹。老外的东西，没办法了，就凑活着用 吧！

----------

原文中没有说明，其实现在可以cname指向到你申请的那个二级域名的页面的。所以我才变成了yii.neatcn.com

 

Tags: yii

PHP | 评论:0 | 阅读:16384

部分转：卡片、页与卷轴

Submitted by gouki on 2012, February 12, 11:01 AM

其实想转这篇文章好久了，但一直在犹豫。众所周知，如今的pad上的文章、HTML网页，都在尝试着改变。如果让人还在不停的向上拖动页面，好象就会被人所诟病。
于是乎翻页就显得至关重要。
从最早ipad上可见的ibooks中的书籍可了解，翻页其实是一件很痛苦的事情。它需要将你的文章内容由程序自己算好，然后将它分页，于是这里面的代价消耗就非常大。一篇文章如果有上千页，当你选择改变字体大小的时候，ibooks就象死机一样，无法拖动。毕竟这个时候程序在计算页码，重绘页面。超级痛苦，而pad又不象台式机那样CPU强劲。带来的郁闷可想而知。
于是更多的人尝试PDF阅读，毕竟当一篇文章转为PDF后，带来的好处也是显而易见，格式固定，编排方便，可以随意跳转，而且PDF的格式公开，任何人都可以尝试制作它，更关键的是，ipad内建支持pdf(如ibook)。但同时也会有一点小问题，比如，不能调整字体大小，不能插入广告（我想这个对于想赢利的企业来说恐怕是最痛苦的），容易被人打包下走所有数据（企业会更恨这个原因）
当kindle出第二版的时候，很多人都在惊呼，阅读的时代要改变了。国内有个做kindle系统打包的叫做“多看”，它对PDF也做了处理，能够对PDF进行分页，很多国内的电子书用户都选择了多看系统，因为看书更方便了。（它实现的也是类似ibook的效果）
好了，先看原文吧，我废话太多了。。。。原文来自：http://apple4.us/2012/02/card-pagination-scroll-lawrence-column-for-blogweekly.html，我部分摘抄
正如原文中所说：

XML/HTML代码
  1. 关于分页与否的讨论自 1980 年代就已开始。苹果 Macintosh 的创始人杰夫·拉斯金用「卡片」和「卷轴」来比喻分页与不分页这两种对信息的呈现方式。到目前为止，万维网（web）基本是卷轴的天下。但电子书的勃兴令情况开始有了变化。  

互联网时代大家都清楚，鼠标滚动。。。

XML/HTML代码
  1. 和大部分软件一样，电子书软件的设计也能找到真实世界中的对应。正如早年的图形介面系统设计者根据桌面、文件、文件夹、垃圾桶这些办公环境中的标配物件想象出了一套譬喻，电子书软件从一开始就沿袭了纸书的习惯，以「页」为基本单位。另一方面，因为一些不必在此深究的原因，大部分主流电子书软件所用的技术恰恰就是万维网的技术──HTML, CSS, JavaScript，亚马逊的 Kindle 与苹果的 iBooks 都不例外。电子书事实上就是「分了页的网页」。  
  2.   
  3. 电子书的读者对于分页与否各有偏好，不过技术潮流由赢家设定。从过去几个月的发展看来，分页是大趋势。亚马逊不久前宣布将推出 Kindle Format 8 格式，将更多平面排版的元素引入 Kindle 书中。苹果的 iBooks 2 与电子书制作软件 iBooks Author 也做了类似的事情，且完成度更高。（其实苹果一直是卡片式设计的支持者。万维网出现之前最成功的超媒体系统 HyperCard 就出自苹果之手，他们甚至把「卡片」一词写进了软件名称。）Flipboard 和 Zite 等热门阅读软件用分页的方式对网页进行了重排，老牌浏览器 Opera 亦于去年启动了实验性的 Opera Reader 计划，目标类似。  
  4.   
  5. 这里的终极问题是：设计师应该拥有多少控制权？在发轫于互联网时代的「赋权于民」的大潮流下，设计的权力是否也应该下放给普通用户？如上所述，从信息设计的角度而言，卡片式 / 分页设计的好处显而易见。它为设计师提供了一种具象而直接的限制（没有限制就没有设计）。对于读者来说，上下左右四条固定的边界也对注意力形成了一定程度的约束。这是用户权力的收缩，也是对设计师和内容生产者的控制权的重新认可。若卡片式设计能取代卷轴成为明日的主流，对于内容方实为幸事。  

卡片还是卷轴，其实真的很让人难以选择。原文中Kindle Format 8 和Opera Reader 都有链接，有兴趣的可以看看。
说来说去，这又回到了开始：

XML/HTML代码
  1. 在纸张出版的世界里，无页不成书。分页的重要性不太会被提起，因为它早已像空气一样无处不在。页界定了包裹内容的边界，是对信息的一种切割──我让你看到的不是全部，而是我挑选过的局部。以页为单位，给了设计师与编辑（编辑也是设计）做选择的可能──没有限制就无需做选择，而做选择就是设计。（包括选择今晚去哪家餐厅吃饭。）  

电子书也需要越来越向纸书那样有页码吗？不过，如果真的没有页码，跳转的时候会比较痛苦吧。从程序设计的角度来说，如果没有页码，也就是说几乎要将所有的内容放到一个容器中，而有了页面，为了翻页速度可以直接读取该页码附近左右的各5页内容，会更方便，也更减少资源的消耗。
然而，真的很痛苦，HTML分页太痛苦了。其他的呢？国内的几个ipad上的阅读软件现在都在好象慢慢放弃HTML分页了，而flipboard越仍然在坚持。
那，我们又是否应该再坚持呢？HTML分页有优点，它的优点在于可以很方便的为HTML网页做一些特别的效果。但带来的问题是大量的精力和开发资源都耗在这上面。（国内的专业做javascript开发的，真的很少啊。专业做这一行的，对于切入HTML排版好象也很排斥，不知道为什么。）
如果你是BOSS，你会怎么选择？

Tags: 分页, html, kindle, flipboard, ipad

Flutter | 评论:0 | 阅读:19573

Records:3108«‹221222223224225226227228229230›»