IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    视频网站播放列表的简单实现

    潘魏增发表于 2008-08-24 23:35:47
    love 0

    以前写的代码,写得比较简单。这里贴一下,我觉得可以作为演示JavaScript操作cookie用:)

    效果看这里,完整代码(代码中的CookieManager拷贝自O'Reilly的《JavaScript & DHTML Cookbook》,Utility.each函数拷贝自jQuery中的each)在这里。

    下面是关键的代码部分:

    var PlayList = {
        cookieName:'PlayListIds',
        //保存要播放的视频id列表
        ids:[],
        //过期时间 单位秒
        expires:30,
        //读取cookie保存的播放列表信息 播放id保存格式为1232.1221.213.123  以.间隔
        read:function(){
            var cookieString = CookieManager.get(this.cookieName);
            return cookieString != '' ? cookieString.split('.') : [];
        },
        //获取视频id在数组中的索引
        indexOf:function(id){
            for(var i =0 ; i < this.ids.length; i++)
                if(this.ids[i] == id.toString())
                    return i;
            return -1;
        },
        //更新cookie信息
        update:function(){
            CookieManager.set(
                this.cookieName,
                this.ids.join('.'),
                CookieManager.getExpiresDate(0,0,this.expires),
                '/',
                '.abc.com'
            );
        },
        //增加视频
        add:function(id){
            if(typeof id != "number" || this.indexOf(id) != -1) return;
            this.ids.push(id.toString());
            this.update();
        },
        //移除视频
        remove:function(id){
            var index = -1;
            if(typeof id != "number" || (index = this.indexOf(id)) == -1) return;
            this.ids.splice(index,1);
            this.update();
        },
        //清空列表
        clear:function(){
            CookieManager.clear();
            var pItem = null,pItemSel = null;
            for(var i = 0; i < this.ids.length; i++){
                if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
                    && (pItem = $('playlist-item-'+this.ids[i])) != null )
                {
                    pItemSel.className = "unselected";
                    pItemSel.title = "添加到点播单";
                    pItem.getElementsByTagName("img")[0].style.border = "5px solid white";
                }
            }
        },
        //渲染
        renderSelected:function(){
            var pItem = null,pItemSel = null;
            for(var i = 0; i < this.ids.length; i++){
                if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
                    && (pItem = $('playlist-item-'+this.ids[i])) != null )
                {
                    pItemSel.className = "selected";
                    pItemSel.title = "从点播单移除";
                    pItem.getElementsByTagName("img")[0].style.border = "5px solid yellow";
                }
            }
        },
        //处理点击
        toggle:function(el){
            if(el.className == 'unselected'){
                el.className = 'selected';
                el.title = "从点播单移除";
                el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid yellow";
                this.add(parseInt(el.getAttribute('sid')));
            } else {
                el.className = 'unselected';
                el.title = "添加到点播单";
                el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid white";
                this.remove(parseInt(el.getAttribute('sid')));
            }
        },
        //绑定事件
        attachEvent:function(){
            var _ = this;
            var els = Utility.getElementsByClassName("playlist","a","unselected");
            els = els.concat(Utility.getElementsByClassName("playlist","a","selected"));
            Utility.each(els,function(i,el){
                Utility.bind(el,'click',_.toggle,_,el)
            })
        },
        //初始化
        init:function(){
            this.ids = this.read();
            this.renderSelected();
            this.attachEvent();
        }
    }


沪ICP备19023445号-2号
友情链接