【问题标题】:youtube api PlayList generate (Title only) [closed]youtube api PlayList 生成(仅限标题)[关闭]
【发布时间】:2012-12-21 14:55:17
【问题描述】:

我有这么大的代码:

function _buildPlaylist() {
        //console.log('_buildPlaylist');

        _lastThumbOrientation=null;//important, make thumb holder every time on new playlist
        _playlistOpened=false;//reset for bottom this._autoOpenPlaylist selection

        var len = _videoProcessData.length, i = 0, thumb, div, _item, active_icon;
        //console.log('len = ', len);

        if(getDeeplinkData){
            dlink = baseURL + strict + firstLevel + '/';
            var str_to_filter, tempArr = categoryArr[activeCategory].mediaName;
        }

        for (i; i < len; i++) {
            //console.log(_item.description);

            _item = _videoProcessData[i];

            //deeplinks
            if(useDeeplink && getDeeplinkData){
                str_to_filter = filterAllowedChars(_item.deeplink);
                //console.log(str_to_filter);
                tempArr.push(str_to_filter);
            }

            playlistLength+=1;

            if(outputDeeplinkData){
                if(_item.type == 'local'){//aspect ratio always present
                    if(mp4Support){
                        loc_path = _item.mp4Path;
                    }else if(vorbisSupport){
                        loc_path = _item.ogvPath;
                    }else if(webmSupport){
                        if(_item.webmPath)loc_path = _item.webmPath;
                    }
                    if(loc_path.lastIndexOf('/')){
                        loc_name = loc_path.substr(loc_path.lastIndexOf('/')+1);
                    }else{
                        loc_name = loc_path;
                    }
                    deeplinkData.push({'id': playlistLength, 'name': loc_name, 'type':_item.type ,'video-id': loc_path, 'deeplink': dlink+_item.deeplink});
                }else{
                    deeplinkData.push({'id': playlistLength, 'name': _item.title?_item.title:'', 'type':_item.type ,'video-id': _item.id, 'deeplink': dlink+_item.deeplink});
                }
            }

            div = $('<div/>').addClass('thumbs').attr({'data-id': playlistLength-1, 'data-type': _item.type});
            if(thumbHolder)div.appendTo(thumbInnerContainer).bind('click', clickPlaylistItem);

            if(_item.type == 'local'){//aspect ratio always present
                div.attr({'mp4Path': _item.mp4Path, 'ogvPath': _item.ogvPath, 'webmPath': _item.webmPath?_item.webmPath:'', 'imagePath': _item.imagePath, 'data-aspectRatio': _item.aspectRatio});
            }else{
                div.attr('path', _item.id);
                if(currentObj.ytSizeSet){//if we have width and height, aspect ratio always present
                    div.attr({'data-width': currentObj.mediaWidth, 'data-height': currentObj.mediaHeight, 'data-aspectRatio': currentObj.aspectRatio});
                }
            }

            if(thumbHolder){
                //create thumb
                if(_item.thumbnail){
                    thumb=$(new Image()).addClass('thumb_img').appendTo(div).attr('alt', _item.title?_item.title:'').css({
                       cursor:'pointer',
                       opacity:0
                    }).load(function() {
                        //console.log($(this))
                        $(this).stop().animate({ 'opacity':1}, {duration: 500, easing: 'easeOutSine'});//fade in thumb
                    }).error(function(e) {
                        //console.log("thumb error " + e);
                    }).attr('src', _item.thumbnail);
                }

                //active icon
                active_icon = $(new Image()).appendTo(div).css({
                    position: 'absolute',
                    display: 'none'
                }).load(function() {
                    //console.log(width,height);
                    $(this).css({
                        width: this.width,
                        height: this.height,
                        left: 50+'%',
                        top: 50+'%',
                        marginLeft: -this.width/2+'px',
                        marginTop: -this.height/2+'px'
                    })
                }).error(function(e) {
                    //console.log("error " + e);
                }).attr('src', ic_active_thumb);

                div.data('active_icon',active_icon);
            }

            _thumbHolderArr.push(div);//we need to have data to manipulate
        }

        checkPlaylistProcess();
    }

(这是一个 youtube api javascript 代码。 它的作用是生成带有视频的 alt 属性标题的缩略图。

我想要的是只生成视频的标题。没有缩略图。

代码生成以下 html(带缩略图)

<div class="thumbInnerContainer" style="top: 0px; left: 0px; width: 3500px;">

<div class="thumbs playlistSelected" data-id="0" data-type="youtube" path="tRe8JfAQmpI" data-width="640" data-height="360" data-aspectratio="2"><img class="thumb_img" alt="Accelerator after effects project file" style="cursor: pointer; opacity: 1;" src="http://i.ytimg.com/vi/tRe8JfAQmpI/hqdefault.jpg"><img style="position: absolute; display: block; width: 37px; height: 37px; left: 50%; top: 50%; margin-left: -18.5px; margin-top: -18.5px;" src="data/icons/active_item.png">
</div>
<div class="thumbs" data-id="1" data-type="youtube" path="QeusWQ4LFmY" data-width="640" data-height="360" data-aspectratio="2"><img class="thumb_img" alt="After Effects Template Platform" style="cursor: pointer; opacity: 1;" src="http://i.ytimg.com/vi/QeusWQ4LFmY/hqdefault.jpg"><img style="position: absolute; display: none; width: 37px; height: 37px; left: 50%; top: 50%; margin-left: -18.5px; margin-top: -18.5px;" src="data/icons/active_item.png">
</div> 
<div class="thumbs" data-id="2" data-type="youtube" path="srGUFQwONXc" data-width="640" data-height="360" data-aspectratio="2"><img class="thumb_img" alt="Photo Album - After Effects Template" style="cursor: pointer; opacity: 1;" src="http://i.ytimg.com/vi/srGUFQwONXc/hqdefault.jpg"><img style="position: absolute; display: none; width: 37px; height: 37px; left: 50%; top: 50%; margin-left: -18.5px; margin-top: -18.5px;" src="data/icons/active_item.png">
</div>
</div>

现在,这就是我想要生成的内容。(仅图像 alt Title attr,没有缩略图。)

<div class="thumbInnerContainer" style="top: 0px; left: 0px; width: 3500px;">

<div class="thumbs playlistSelected" data-id="0" data-type="youtube" path="tRe8JfAQmpI" data-width="640" data-height="360" data-aspectratio="2">
  Accelerator after effects project file
</div>
<div class="thumbs" data-id="1" data-type="youtube" path="QeusWQ4LFmY" data-width="640" data-height="360" data-aspectratio="2">
   After Effects Template Platform 
</div>
<div class="thumbs" data-id="2" data-type="youtube" path="srGUFQwONXc" data-width="640" data-height="360" data-aspectratio="2">
    Photo Album - After Effects Template
</div>
</div>

注意:找到这些行以查看它是如何生成 html 的

//create thumb
                if(_item.thumbnail){
                    thumb=$(new Image()).addClass('thumb_img').appendTo(div).attr('alt', _item.title?_item.title:'').css({
                       cursor:'pointer',
                       opacity:0
                    }).load(function() {
                        //console.log($(this))
                        $(this).stop().animate({ 'opacity':1}, {duration: 500, easing: 'easeOutSine'});//fade in thumb
                    }).error(function(e) {
                        //console.log("thumb error " + e);
                    }).attr('src', _item.thumbnail);
                }

如何更改为仅生成标题而不生成缩略图。

【问题讨论】:

  • 有什么问题? (注意这是一个修辞问题)
  • 会发生什么是生成缩略图,我想做的是只生成标题。我该怎么做?

标签: javascript jquery youtube-api playlist


【解决方案1】:

你需要修改这一行。

div = $('<div/>').text(_item.title ? _item.title : '')....  

并删除下面的所有if 子句,该子句生成两个&lt;img/&gt; 元素并将它们附加到div 中新创建的&lt;div/&gt; 元素。既然你不想要它,那么你可以把它全部扔掉。

if (thumbHolder) {
  ...
}

【讨论】:

  • 天啊!这就是解决方案!!!迅速而惊人。太棒了 >D 谢谢你,Alexander,'太棒了。
猜你喜欢
  • 2011-06-09
  • 1970-01-01
  • 2019-07-01
  • 2012-08-14
  • 2010-09-15
  • 2020-08-25
  • 2017-02-12
  • 2016-10-13
  • 2019-02-06
相关资源
最近更新 更多