Coding Serf - 2013

用Canvas播放视频

一、为什么用Canvas来播放视频 1、用更高帧频来替代视频本身的timeupdate事件。因为视频的timeupdate事件是在浏览器保证视频正常加载并正常渲染的情况下才去考虑触发的,因此就有了250ms触发一次timeupdate事件的说法,也就是一秒四帧。当然,视频播放肯定会比这个帧频高很多。 2、避免在小屏幕iOS设备上全屏播放视频。苹果的Safari Developer Library中《Safari HTML5 Audi...

HTML5 API 探秘 – Web Worker

Web Worker 是什么 Web Worker 为 JavaScript 在浏览器里的运行提供了多线程接口。这样一来,我们就可以把那些复杂的耗时的不涉及DOM操作的运算抛给浏览器的一个后台线程来处理。(据说)这种线程是操作系统级别的。 让我们来看一段代码,简单了解一下 Web Worker 的 API: /* @constructor 构造函数 Worker(JSURL); @param {DOMString} JSURL是要在后台线程中执行的JS文...

JavaScript最佳实践(下)

  避免大量嵌套 达到一定程度的嵌套后代码将变得不可读。 多重循环是个非常糟糕的主意,它意味着你要同时兼顾好几个迭代器变量(i, j, k, l, m…)。 function renderProfiles(o){ var out = document.getElementById('profiles'); for(var i=0;i<o.members.length;i++){ var ul = document.createElement(&#...

JavaScript最佳实践(上)

  让命名简单易懂 为变量和方法命名时,要选择浅显易懂,简短明了的名字。 不好的变量名: x1 fe2 xbqne 同样不好的变量名: incrementerForMainLoopWhichSpansFromTenToTwenty createNewMemberIfAgeOverTwentyOneAndMoonIsFull 避免用一个具体值来描述一个变量或是方法的名字。 在某些国家也许会没有意义: isOverEighteen() //...

HTML5+jQuery+CSS3自定义视频播放器

关于HTML 5中Video接口的详细介绍可以参看W3School的HTML 5 视频/音频参考手册,这是写一个播放器的基础。闲言少叙,直切正题,下面是播放器的最终效果: 首先来看一下HTML代码以及播放器的调用: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VideoPlayer</title> <link rel="stylesheet" typ...

关于Windows Phone 8平台IE 10的一个bug

澳大利亚官方旅游网站告一段落,本来一切是那么完美…… 然而不幸的是,你可能已经注意到这句话正上方图中那个红圈圈了~对,它是Lumia 720,装的是 Windows Phone 8 的系统,跑的是Internet Explorer 10(Mobile)的浏览器。你猜对了,这次又被IE给坑了! 问题描述: 这个登录框是个popup的div,所以很明显它是Ajax登录的,我有一个异常充分的理由可以让你暂先不管这种方式在安...

Canvas入门之“我去年买了个表”

就是个基础画…… 最终效果: // 12 ? hour-12:hour; drawHand(hour*5+(date.getMinutes()/60)*5,true,false); drawHand(date.getMinutes(),false,true); drawHand(date.getSeconds(),false,false); }function drawClock(){ ctx.clearRect(0,0,c.width,c.height); drawCircl(); drawNums(); drawHands(); drawCenter(); }window.setInterval(draw...

BEM的定义

  特别声明:此篇文章由David根据《Block, Element, Modifier》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://bem.info/method/definitions/以及作者相关信息 ——作者:BEM官网 ——译者:David 什么是BEM? BEM代表块(Block),元素(...

让那些为Webkit优化的网站也能适配IE10

  特别声明:此篇文章由David根据Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-s...

BEM的50道阴影

  特别声明:此篇文章由David根据Kaelig的英文文章原名《Fifty Shades of BEM》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem以及作者相关信息 ——作者:Kaelig ——译者:David 当一...

文章归档
友情链接
参与项目
  • 830.格林学堂
  • 840.精优教育
  • 850.拯救红包君
  • 860.不开心抢包包
  • 870.打大折
  • 880.金地广场(西安)
  • 890.Engine Group
  • 900.Starbucks Mooncake
  • 910.宝存科技
  • 920.诺优能
  • 930.Zuse
  • 940.新吉士
  • 950.KSNY x Darcel
  • 960.澳大利亚官方旅游网站
  • 970.圣诞捞
  • 980.FlipScript
  • 990.五维互动
Copyright © 2013-2014 Coding Serf | Powered By WordPress |Theme design By Coding Serf