易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

备份一个video的JS

备份：html5 canvas cheat sheet

Infomation:WebKit Does HTML5 Client-side Database Storage

WebKit Does HTML5 Client-side Database Storage

雅虎JavaScript架构师：网页开发技术安全优先

备份一个video的JS

备份：html5 canvas cheat sheet

Infomation:WebKit Does HTML5 Client-side Database Storage

WebKit Does HTML5 Client-side Database Storage

雅虎JavaScript架构师：网页开发技术安全优先

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

浏览模式: 标准 | 列表Tag:html5

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

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

JavaScript代码

var media_events=new Array();
// was extracted from the spec in November 2011
media_events["loadstart"]=0;
media_events["progress"]=0;
media_events["suspend"]=0;
media_events["abort"]=0;
media_events["error"]=0;
media_events["emptied"]=0;
media_events["stalled"]=0;
media_events["loadedmetadata"]=0;
media_events["loadeddata"]=0;
media_events["canplay"]=0;
media_events["canplaythrough"]=0;
media_events["playing"]=0;
media_events["waiting"]=0;
media_events["seeking"]=0;
media_events["seeked"]=0;
media_events["ended"]=0;
media_events["durationchange"]=0;
media_events["timeupdate"]=0;
media_events["play"]=0;
media_events["pause"]=0;
media_events["ratechange"]=0;
media_events["volumechange"]=0;
var media_controller_events=new Array();
// was extracted from the spec in November 2011
media_controller_events["emptied"]=0;
media_controller_events["loadedmetadata"]=0;
media_controller_events["loadeddata"]=0;
media_controller_events["canplay"]=0;
media_controller_events["canplaythrough"]=0;
media_controller_events["playing"]=0;
media_controller_events["ended"]=0;
media_controller_events["waiting"]=0;
media_controller_events["durationchange"]=0;
media_controller_events["timeupdate"]=0;
media_controller_events["play"]=0;
media_controller_events["pause"]=0;
media_controller_events["ratechange"]=0;
media_controller_events["volumechange"]=0;
// was extracted from the spec in November 2011
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" ];
var media_properties_elts=null;
var webm=null;
function init(){
document._video=document.getElementById("video");
webm=document.getElementById("webm");
init_events();
init_properties();
init_mediatypes();
// properties are updated even if no event was triggered
setInterval(update_properties,500);
}
document.addEventListener("DOMContentLoaded",init,false);
function init_events(){
for(key in media_events){
document._video.addEventListener(key,capture,false);
}
var tbody=document.getElementById("events");
var i=1;
var tr=null;
for(key in media_events){
if(tr==null) tr=document.createElement("tr");
var th=document.createElement("th");
th.textContent=key;
var td=document.createElement("td");
td.setAttribute("id","e_"+key);
td.innerHTML="0";
td.className="false";
tr.appendChild(th);
tr.appendChild(td);
if((i++%5)==0){
tbody.appendChild(tr);
tr=null;
}
}
if(tr!=null) tbody.appendChild(tr);
}
function init_properties(){
var tbody=document.getElementById("properties");
var i=0;
var tr=null;
media_properties_elts=new Array(media_properties.length);
do{
if(tr==null) tr=document.createElement("tr");
var th=document.createElement("th");
th.textContent=media_properties[i];
var td=document.createElement("td");
td.setAttribute("id","p_"+media_properties[i]);
var r=eval("document._video."+media_properties[i]);
td.innerHTML=r;
if(typeof(r)!="undefined"){
td.className="true";
}else{
td.className="false";
}
tr.appendChild(th);
tr.appendChild(td);
media_properties_elts[i]=td;
if((++i%3)==0){
tbody.appendChild(tr);
tr=null;
}
}while(i<media_properties.length);
if(tr!=null) tbody.appendChild(tr);
}
function init_mediatypes(){
var tbody=document.getElementById("m_video");
var i=0;
var tr=document.createElement("tr");
var videoTypes=[ "video/ogg","video/mp4","video/webm" ];
i=0;
tr=document.createElement("tr");
do{
var td=document.createElement("th");
td.innerHTML=videoTypes[i];
tr.appendChild(td);
}while(++i<videoTypes.length);
tbody.appendChild(tr);
i=0;
tr=document.createElement("tr");
if(!!document._video.canPlayType){
do{
var td=document.createElement("td");
var support=document._video.canPlayType(videoTypes[i]);
td.innerHTML='"'+support+'"';
if(support==="maybe"){
td.className="true";
}else if(support===""){
td.className="false";
}
tr.appendChild(td);
}while(++i<videoTypes.length);
tbody.appendChild(tr);
}
}
function capture(event){
media_events[event.type]=media_events[event.type]+1;
for(key in media_events){
var e=document.getElementById("e_"+key);
if(e){
e.innerHTML=media_events[key];
if(media_events[key]>0) e.className="true";
}
}
update_properties();
}
function update_properties(){
var i=0;
for(key in media_properties){
var val=eval("document._video."+media_properties[key]);
/*
if (typeof val === "TimesRanges") {
val = val.length + " TimeRanges";
}
*/
media_properties_elts[i++].innerHTML=val;
}
if(!!document._video.audioTracks){
var td=document.getElementById("m_audiotracks");
td.innerHTML=document._video.audioTracks.length;
td.className="true";
}
if(!!document._video.videoTracks){
var td=document.getElementById("m_videotracks");
td.innerHTML=document._video.videoTracks.length;
td.className="true";
}
if(!!document._video.textTracks){
var td=document.getElementById("m_texttracks");
td.innerHTML=document._video.textTracks.length;
td.className="true";
}
}
var videos=new Array();
videos[0]=[
"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"
];
videos[1]=[
"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"
];
videos[2]=[
"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"
];
videos[3]=[
"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"
];
function switchVideo(n){
if(n>=videos.length) n=0;
var mp4=document.getElementById("mp4");
var ogv=document.getElementById("ogv");
var parent=ogv.parentNode;
document._video.setAttribute("poster",videos[n][0]);
mp4.setAttribute("src",videos[n][1]);
ogv.setAttribute("src",videos[n][2]);
if(videos[n][3]){
if(webm.parentNode==null){
parent.insertBefore(webm,ogv);
}
webm.setAttribute("src",videos[n][3]);
}else{
if(webm.parentNode!=null){
parent.removeChild(webm);
}
}
document._video.load();
}

这一段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代码

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

借鉴一下。

Tags: html5, video, audio

Javascript | 评论:0 | 阅读:22947

Submitted by gouki on 2011, December 19, 10:57 PM

纯备份资料,HTML5的canvas资料

Tags: html5, canvas, cheat sheet

Javascript | 评论:0 | 阅读:17346

Submitted by gouki on 2011, November 12, 11:07 PM

资料备份，其中有两个链接很重要：
原资料中的：client-side database storage.已经打不开了，好象是换成这个了：10.1.2.2 A worker for updating a client-side database
但我也说不准，详情还是看这个页面吧：http://www.whatwg.org/specs/web-apps/current-work/multipage/

对了，因为是基于webkit的，所以，FF上是没法用的。更多的还是用于ipad,iphone之类的上面吧。

jQueryMobile的代码里应该是有了

Posted by Brady Eidson on Friday, October 19th, 2007 at 4:04 pm

The current working spec for the HTML5 standard has a lot of exciting features we would eventually like to implement in WebKit. One feature we felt was exciting enough to tackle now even though the spec is still in flux is client-side database storage. So for the last few weeks andersca, xenon, and I have been cooking up an implementation!

The client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.

The API is asynchronous and uses callback functions to track the results of a database query.
Compact usage defining a callback function on the fly might look something like this:
var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) { // do something with the results database.executeSql("DROP TABLE test", function(result2) { // do some more stuff alert("My second database query finished executing!"); }); });
There will also be a small example of how to use the API in a real site that we’ll try to keep up to date as things evolve.

This initial implementation has some things missing from the spec as well as a few known bugs. But it does the basics and the best way to discover what needs work is to get it out there for people to start using it!

If you find any bugs, would like to suggest features, or have gripes about the spec itself, please drop by #webkit or drop us a line on the WebKit email lists.

Oh, and one more thing…

We’re landing this initial implementation with pretty cool Web Inspector support!
So far you can view the full contents of any table and run arbitrary queries on each database a page is using. We have a lot of ideas for improvements but would also love to hear yours.

Tags: html5, database, storage

DataBase | 评论:0 | 阅读:15941

Submitted by gouki on 2010, April 26, 9:30 PM

html5 越来越近了，HTML5可能给我们带来很大的改变，就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm

由于当前技术仍偏向功能强化为主要思维，指令码趋向庞杂的结果，容易产生更多安全漏洞，且失去快速因应攻击调整架构的灵活性。
身为JavaScript网路技术重要推手的雅虎（Yahoo!）架构设计师Douglas Crockford表示，现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升，未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师，负责YUI（Yahoo! User Interface）的架构设计，并且担任ECMA JavaScript 2.0技术委员会成员，为JavaScript开发社群大师级人物，此次受邀来台参加OSDC（Open Source Developer's Conference Taiwan）进行专题演讲，向国内开发者介绍ECMA JavaScript的发展。

Crockford向媒体阐述网络技术发展时指出，当前的网络技术仍然不脱过去的思维，网页开发技术仍以功能强化、浏览网页效能提升为主，虽然强化了网络开发的丰富性，但未将网络安全列为开发优先考虑因素的结果，致使网络安全事件层出不穷。

延续过去网络开发思维的结果，现今网络技术强调强大的互动、多媒体功能，但也让一些攻击手法兴起，以XSS（Cross-Site Scripting）为例，由于内嵌多个不同来源的脚本，容易让黑客借指令集趁虚而入，窃取用户端计算机的数据。

虽然也有新的技术，如 Google推动的Caja，用以防范XSS跨站攻击手法，但整体技术发展方向仍是朝功能、效能提升前进。

以HTML 5技术为例，Crockford表示，虽然HTML5增加了许多功能，但让整个脚本变得更为庞大且复杂，容易产生漏洞遭到攻击；另外，支持存取使用者电脑、手机的终端数据，将数据被窃的安全风险扩大至手机上，而过于庞大复杂的结果，不容易因应日新月异的攻击手法改变，长期而言易形成安全风险。

对于当前浏览器业者形成速度竞赛，纷纷强化JavaScript引擎加速网页浏览速度，号称最快的浏览速度，他认为，浏览器加速网页浏览速度虽是好事，但这样改善方式有限，只在5至10%的终端浏览器部份加速，若能同时改善服务器端，加速的效果更大。

对于制定中的新标准ECMA Script 5，他乐观预期未来将成为主要的网络开发标准，虽然Apple、Chrome还不明确，但包括IE、FireFox、Opera都倾向ECMA Script 5，今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持，IE还能挺多久？是否又会创造出什么新标准？从IE4开始，多少网页设计师为了兼容所有的浏览器而痛苦？以后又会怎么样？IE6还有这么多用户，怎么办？这一些都让人迷惘啊。HTML5来了，对于前端工程师的压力就要更大一点了。代码没写好，很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了

Tags: html5, ecmascript, javascript, chrome, yahoo

Javascript | 评论:0 | 阅读:18245

« 2024年04月 »