KUNKKA » 原创 http://www.kunkka.cn 活着就是折腾 Tue, 01 Jun 2010 07:38:00 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 使用object在web中嵌入视频文件 http://www.kunkka.cn/2010/02/02/how-to-embed-video/ http://www.kunkka.cn/2010/02/02/how-to-embed-video/#comments Tue, 02 Feb 2010 09:54:52 +0000 kunkka http://www.kunkka.cn:81/?p=287 使用object在web中嵌入视频文件

如何在web中嵌入视频文件，用什么方式嵌入既符合标准又能兼容主流浏览器？

在web中嵌入视频的方式有两种，使用古老的embed标签或者object标签，古老的embed标签是由传说中Netscape所创建，它虽然广泛存在，但依然没有被W3c收录，是不被W3c推荐的，取而代之的是object标签，object标签在未来的web应用中不仅用于视频媒体的嵌入，还包括images,text,audio,applets,Flash animations等等各式各样格式的文件，现在大多数主流浏览器也都支持object标签的很多类型调用，要测试你的浏览器支持那些object类型，可以查看 OBJECT test suite

那如何嵌入一段视频到web中(以wmv为例)，代码如下：

1
2
3
4
5

<object data="xx.wmv" type="video/x-ms-wmv" width="320" height="255">
  <param name="src" value="xx.wmv">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
</object>

以上这段代码可以正常运行在绝大多数浏览器中，如果你要插入其他格式的视频，你可以更改object标签的type属性，就比如你需要插入mpg格式的视频，type就应该为”video/mpeg”；avi格式相对应的type为”video/avi”

但在嵌入QuickTime文件时，IE7以下版本和标准浏览器还有分歧，它需要一个非标准的classid属性值，一个标识去加载一个相关联activeX，详细查看Bye Bye Embed。解决方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="320" height="255">
  <param name="src" value="data/test.mov" >
  <param name="controller" value="true" >
  <param name="autoplay" value="false">
  <!--[if gte IE 7]> <!-->
  <object type="video/quicktime" data="data/test.mov" width="320" height="255">
    <param name="controller" value="true" >
    <param name="autoplay" value="false">
  </object>
  <!--<![endif]-->
</object>

在实际应用中，如果我按标准方式插入一个wmv视频到IE中，播放器需要等待wmv文件完全载入成功后才会显现出来（非流媒体播放），也就是说视频没有载入完成的时候，是不会出现播放界面的，这样对于k数比较大的视频文件，就是个悲剧。但经过尝试如果去掉object的data属性，只是使用<param name=”src” value=”xx.wmv”>来调用wmv文件，不仅IE正常了，而且其他主流浏览器也能正常播放…… 最终代码如下：

1
2
3
4
5

<object type="video/x-ms-wmv" width="320" height="255">
  <param name="src" value="xx.wmv">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
</object>
]]> http://www.kunkka.cn/2010/02/02/how-to-embed-video/feed/ 4 浅谈javascript的分号 http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/ http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/#comments Thu, 03 Dec 2009 13:39:05 +0000 kunkka http://www.kunkka.cn:81/?p=195 javascript的分号代表语句的结束符，但由于javascript具有分号自动插入规则，所以它是一个十分容易让人模糊的东西，在一般情况下，一个换行就会产生一个分号，但实际情况却不然，也就是说在javascript中换行可能产生分号，也可能不产生，是否自动插入分号，主要看上下行。所以即使是经验丰富的程序员，有时候也会头大。

在ECMAScript中对分号自动插入规则也有相应的解释：空语句，变量语句，表达式语句，do-while 语句，continue 语句，break 语句，return 语句，以及 throw 语句，这些确定的ECMAScript语句必须以分号结束。这些分号可以总是明确地出现在源代码文本中。为方便起见，在特定的情况下，源代码文本中的这些分号可以被省略。也就是说这些语句的结尾是不需要硬性的输入分号结尾，javascript会自动插入语句结束处。

想了解详细的ECMAScript分号自动插入规则可以查看以下链接：

实践出真理，看一下下面这些例子，就明白，分号自动插入不是那么好让人捉摸的。稍微不注意就会让你头大。

return引起的血案

function test(){
   var a = 1;
   var b = 2;
   return //会自动插入分号
       (
         a+b
       )
};
alert(test());

一个返回a+b值的函数，初看没任何问题，但运行alert的结果却是undefined。根据分号的自动插入规则，return 语句后面如果有换行就会自动插入分号，没有返回值也就比较好理解了。如果需要换行的话，可以这样：

function test(){
   var a = 1;
   var b = 2;
   return ( 
           a+b
          )
};
alert(test());

两个闭包引起的血案

(function (){
  var a;
})() //不会自动插入分号
(function (){
  var b;
})()

很诡异，解释不了，谁能告诉我～

for语句头中的两个分号，不自动插入分号

for( var a=1,b=10 //不会自动插入分号
         a<b //不会自动插入分号
         a++ 
   )
{}

ECMAScript对以上也有解释：将分号解释为空语句和在for语句中的()中不自动插入分号是特例，是不属于自动插入规则管辖的。

javascript虽然是弱类型语言，ECMAScript的分号自动插入规则也让人难以理解透彻。但养成良好的代码书写习惯，手动插入分号，养成习惯，就能避免这些问题，同时会在程序调试，代码的阅读上对自己对他人都有不小的帮助。

同时ECMAScript还给程序员一些忠告：

  • ++ 或 — 应和其操作数出现在同一行。
  • return 或 throw 语句中的表达式应和return 或 throw 出现在同一行。
  • break 或 continue 语句中的标签应和break 或 continue 出现在同一行。
]]> http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/feed/ 2 Amazing ImageSwitch http://www.kunkka.cn/2009/11/24/amazing-imageswitch/ http://www.kunkka.cn/2009/11/24/amazing-imageswitch/#comments Tue, 24 Nov 2009 09:54:33 +0000 kunkka http://www.kunkka.cn:81/?p=167 查看Demo

查看Demo： Demo-1  Demo-2  下载源文件

amazing ImageSwitch是一个图片切换脚本，形式上类似于大多数图片切换，只是在切换效果上加了些创新。这个脚本是四个月前写的，期间也有不断地修改和完善。也不知道取个什么名字好，就暂叫amazing ImageSwitch吧 。

amazing ImageSwitch的实现需要点创意，难点在于图片的分割上，其实原理是比较简单的，就好比打碎鸡蛋在组合的过程，首先你需要把图片切割成几块，然后再将它拼接成一个完整的图片才能实现其他动画。但要真正完成图片的分割，js还实现不了，但变通一下将图片转换成背景，利用一下CSS Sprites呢，靠谱。以下是主要思路：

  • 根据图片的宽高计算出切割块的数量和宽高（原图的宽度 = 切割快的数量 * 切割块的宽；高度计算同上）
  • 利用DOM依次动态循环插入切割块到相应的位置。并利用css进行定位排列。
  • 获取图片的src地址，作为背景图片备用，然后使用CSS Sprites技术，将背景定位到相对应的切割快，让其组成一个完整的图片。

当然以上说所只是大概的原理，具体实现还有很多细节上的技术需要考虑，了解详细请查看源代码。

ps：前几天在蓝色上看到一同行做了个类似的效果，详细可查看他的“奇淫技巧之图片切割”一文。声明一下哦，我可没有借鉴抄袭的嫌疑，你可以查看源代码，js的封装和写法都是完全出自不同人的手。只能说实属巧合了，呵呵。原理都差不多，多动动脑子就能想写好玩的东西。

]]> http://www.kunkka.cn/2009/11/24/amazing-imageswitch/feed/ 2 简单的ToolTip http://www.kunkka.cn/2009/11/17/simple-tooltip/ http://www.kunkka.cn/2009/11/17/simple-tooltip/#comments Tue, 17 Nov 2009 06:40:25 +0000 kunkka http://www.kunkka.cn:81/?p=163 一个简单的ToolTip，用于替换浏览器默认的提示框，适用于任何HTML元素，想要显示ToolTip，只需要在相应的html元素上添加title，或者在图片上添加alt标签。

详细查看 Demo 及其源代码

]]> http://www.kunkka.cn/2009/11/17/simple-tooltip/feed/ 0 自家用的’popUp’ http://www.kunkka.cn/2009/07/13/my-popup/ http://www.kunkka.cn/2009/07/13/my-popup/#comments Mon, 13 Jul 2009 06:44:57 +0000 kunkka http://308739.ctc-us1-g5.dns.com.cn/?p=64 发布一个自家用的’popUp’，详细查看 Demo。

自家用的'popUp'

工作这几年，如果要说什么javasrcipt交互效果做的最多，弹出框口算一个了。

现在流行的’popUp’也是非常多。有好有烂，优秀的比如： Lightbox、ThickBox、Facebox、multibox…. 以前一直是用ThickBox，至于为什么要自己写一个‘popUp’主要也是考虑到自己工作的需求和利于扩展，我也不喜欢仅仅为了一个popUp效果就调用一个库，这样对于K数要求严格的网站，无疑是个比较大的负担。于是就自己琢磨了一个 :)

有用得到的同学可以在Demo页面下载，如果有发现BUG，请留言给我，谢谢！

]]> http://www.kunkka.cn/2009/07/13/my-popup/feed/ 4 如何检测IE8 http://www.kunkka.cn/2009/06/18/how-to-detect-ie8/ http://www.kunkka.cn/2009/06/18/how-to-detect-ie8/#comments Thu, 18 Jun 2009 10:38:44 +0000 kunkka http://308739.ctc-us1-g5.dns.com.cn/?p=26

单纯从检测浏览器的版本来说， userAgent对IE8已经不再可靠，原因是IE8加入了兼容性视图功能，导致IE8出现多个userAgent。
详细查看gracecode的《由IE8 User-Agent 更新想到的》一文

在ie8下分别用三种”浏览器模式”运行以下代码

    alert(navigator.appVersion)

我在Vista下运行以上代码的结果如下：

可以看出除了IE版本号不一样以外，Trident标识也有区别

那么如何判断IE8，办法还是有的……

功能检测

检测浏览器是否支持IE8特有的WebSlices、Accelerator、Visual Search 功能

function isIE8(){
  return typeof (window.external.AddToFavoritesBar) != "undefined" 
         || typeof (window.external.AddService) != "undefined"
         || typeof (window.external.AddService) != "undefined"
}
try{
  if(isIE8())
    alert('IE8')
  else 
    alert('非IE8浏览器');
 }
 catch(e){
   alert('非IE8浏览器');
 }

对象检测

利用IE8的XDomainRequest对象检测（推荐）

   var isIE8 = !!window.XDomainRequest;

以上两种解决方案现在是可以解决IE8的判断问题，但是也只是向后兼容的解决方案，如果IE发布新的浏览器，以上的方法将不再可靠，到时候还需要userAgent和特性检测相结合的方法。IE真是个让人很头疼的东西～。

延伸

IE,FF,safari,chrome,opera主流浏览器的检测

   ie = '\v'=='v';   
   ie = !!top.execScript;   
   ie = /*@cc_on!@*/!1;   
   ie8 = !!window.XDomainRequest;   
   IEVersion = 0/*@cc_on+ScriptEngineMajorVersion()@*/;   
   ff = /a/[-1]=='a';   
   ff3 = (function  x(){})[-5]=='x';   
   ff2 = (function x(){})[-6]=='x';   
   safari=/a/.__proto__=='//';   
   chrome=/source/.test((/a/.toString+''));   
   opera=/^function \(/.test([].sort);
]]> http://www.kunkka.cn/2009/06/18/how-to-detect-ie8/feed/ 0 非侵入式 “images loading” http://www.kunkka.cn/2009/06/15/images-loading/ http://www.kunkka.cn/2009/06/15/images-loading/#comments Mon, 15 Jun 2009 07:15:36 +0000 kunkka http://308739.ctc-us1-g5.dns.com.cn/?p=1

当我们在浏览一个网站的时候，由于受到网速(或者带宽)的影响，大幅的或高质量图片的载入速度将显得非常慢。虽然你可以通过压缩图片的尺寸，或者通过服务器端的技术来优化，但也无法从根本上解决问题，给用户好的浏览体验。

“images loading”是个不错的增强用户体验的方法。要判断图片是否载入成功，常用的方法是image的onload方法，或者通过image的complete属性来判断图片的当前载入状态，

下面就以上两种方法分别给出解决方案

//使用'onload'方法的解决方案
function addLoadEvent(loadEvent,waitForImages) {
    if(waitForImages) {
        return addEvent(window, 'load', loadEvent);
    }
    var init = function() {
        if (arguments.callee.done) return;
        arguments.callee.done = true;
        loadEvent.apply(document,arguments);
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", init, false);
    }
    if (/WebKit/i.test(navigator.userAgent)) {
        var _timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) {
                clearInterval(_timer);
                init();
            }
        },10);
    }
    /*@cc_on @*/
    /*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            init();
        }
    };
    /*@end @*/
    return true;
} 
 
function photoShow(o,parm){
   this.o = document.getElementById(o);
   this.imgs = this.o.getElementsByTagName("img");
   this.loadImg = parm.loadImg;
   this.init();
}
photoShow.prototype = {
   init:function (){
     var _this = this;
     var length = this.imgs.length;
     for (var i = 0 ; i<length ; i++ ) {
         if(this.imgs[i].complete) continue;
         this.imgs[i].style.display = 'none';
         this.imgs[i].parentNode.style.background  = 'url(' + this.loadImg + ') no-repeat center';
         this.imgs[i].onload = function (){ _this.showPic(this)}
     };
   },
   showPic : function (o){
      o.parentNode.style.background = 'none';
      o.style.display = 'block';
      var _this = this , count = 0;
      (function (){
        if(count >= 100) { return;}
        count += 5;
        _this.setOpacity(o,count)
        setTimeout( arguments.callee , '10')
       })()
   },
   setOpacity : function( elem, level ) {
       if ( elem.filters )
           elem.style.filter = 'alpha(opacity=' + level + ')';
       else
           elem.style.opacity = level / 100;
   }
}
addLoadEvent(function(){
new photoShow('photos01',{loadImg:'31-0.gif'})
new photoShow('photos02',{loadImg:'32-0.gif'})
},false)
//使用'complete'属性的解决方案
function addLoadEvent(loadEvent,waitForImages) {
     if(waitForImages) {
         return addEvent(window, 'load', loadEvent);
     }
     var init = function() {
         if (arguments.callee.done) return;
         arguments.callee.done = true;
         loadEvent.apply(document,arguments);
     };
     if (document.addEventListener) {
         document.addEventListener("DOMContentLoaded", init, false);
     }
     if (/WebKit/i.test(navigator.userAgent)) {
         var _timer = setInterval(function() {
             if (/loaded|complete/.test(document.readyState)) {
                 clearInterval(_timer);
                 init();
             }
         },10);
     }
     /*@cc_on @*/
     /*@if (@_win32)
     document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
     var script = document.getElementById("__ie_onload");
     script.onreadystatechange = function() {
         if (this.readyState == "complete") {
             init();
         }
     };
     /*@end @*/
     return true;
} 
 
function photoShow(o,parm){
    this.o = document.getElementById(o);
    this.imgs = this.o.getElementsByTagName("img");
    this.loadImg = parm.loadImg;
    this.init();
}
photoShow.prototype = {
    init:function (){
      var length = this.imgs.length;
      for (var i = 0 ; i<length ; i++ ) {
          if(this.imgs[i].complete) continue;
          this.imgs[i].parentNode.style.background  = 'url(' + this.loadImg + ') no-repeat center';
          this.imgs[i].style.display = 'none';
          this.initImg(this.imgs[i]);
      };
    },
    initImg : function (o){
       var _this = this;
       if(o.complete) { _this.showPic(o) ; return };
       setTimeout(function (){ _this.initImg(o) } , '10')
    },
    showPic : function (o){
       o.parentNode.style.background = 'none';
       o.style.display = 'block';
       var _this = this , count = 0;
       (function (){
         if(count >= 100) {return;}
         count += 5;
         _this.setOpacity(o,count)
         setTimeout( arguments.callee , '10')
        })()
    },
    setOpacity : function( elem, level ) {
        if ( elem.filters )
            elem.style.filter = 'alpha(opacity=' + level + ')';
        else
            elem.style.opacity = level / 100;
    }
}
addLoadEvent(function(){
 new photoShow('photos01',{loadImg:'31-0.gif'})
 new photoShow('photos02',{loadImg:'32-0.gif'})
},false)

上面用到了addLoadEvent方法，用于在页面DOM载入完成后立即执行相应的函数，

以上两段代码从性能上讲显然是使用onload方法更好点，onload是当图像装载完毕时调用的事件句柄。而complete属性是返回浏览器是否已完成对图像的加载,是一种当前状态，返回的值是布尔值。结合此列来讲，要判断images是否加载完成，就要反复的判断image.complete是否为真，这样就要用到setTimeout或者setInterval函数，这也将增大浏览器的开销。

]]> http://www.kunkka.cn/2009/06/15/images-loading/feed/ 0