Question

我正在使用youtube api（2.0）从特定频道中提取9个观看次数最多的视频。我有一个视频播放器和一个缩略图列表，标题+缩略图+ viewcount + description。单击列表项时，所选视频将加载到播放器中。到目前为止，一切都很好。

现在我想添加yt-video描述，但不是作为列表项的一部分（已经正常工作）但是在播放器旁边。这意味着我必须将“description”值添加到loadVideo函数，该函数在单击列表项时触发。但无论我尝试什么，它都行不通:-(

这是我的代码：

<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>

<script type="text/javascript">

// Load Video
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&showinfo=0&autohide=1&autoplay=' + 
      (autoplay?1:0), 'player', '450', '250', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

// Get feed data and push thumbnails 
function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var description = entries[i].media$group.media$description.$t.substr(0, 100);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    var viewcount = entry.yt$statistics.viewCount;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/><br /><span class="views">Views: ', viewcount,'</span><br><span class="views">', description,'</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');

  // Load first video by default
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>

<!-- Output -->
<div style="width:800px; margin: 0 auto;">    
<div id="playerContainer" style="width: 100%; height: 250px; float: left;"><object id="player"></object></div>
<div id="videos2"></div>        
</div>

<!-- JSON Feed -->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/users/100stimmen/uploads?alt=json-in-script&callback=showMyVideos2&max-results=9&orderby=viewCount">
</script>

我想我必须操纵三件事：

1）将“description”值添加到loadVideo函数并打印出描述。

2）还将'description'添加到html.push块，该块定义了click事件 onclick =“loadVideo（）”。对我来说这是最大的问题，我无法通过语法来传递描述值。

3）默认情况下，第一个视频将被加载到播放器中，所以我也必须在这里添加说明，其工作原理如下：

  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url,
    entries[0].media$group.media$description.$t.substr(0, 100), 
    false
    );
  }

这里还有一个测试页：http://viniblu.de/public/youtube_test.html

嗯，这就是我到目前为止所拥有的。有谁知道如何显示点击视频的描述？

Answer 1

我已经编写了一些非常相似的东西，但依赖于jQuery库。希望这有助于并且是一个很好的起点。

如果是我，我会重写下面的整个loadVideo函数，只使用

中的数据。例如，视频URL的范围，在CSS中，它将被声明为“display：none”。

完整文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Youtube API Test</title>
<style>
.wrapper {width:800px; margin:auto;}
#screen {width: 100%; height: 250px; float: left;}
#videos {
    margin-bottom: 1em;
    padding-left : 0em;
    margin-left: 0em;
    list-style: none;
    display: block;
    float: left;
    width: 500px;
}
#videos li {
    float: left;
    width: 130px;
    height: 200px;
    margin-bottom: 1em;
    margin-right: 1.9em;
    cursor: pointer;
    line-height: 15px
}
#videos li span {
    font: 10px/11px arial, sans-serif;
}
.cb {clear:both;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // get youtube video feed
    $.getJSON('http://gdata.youtube.com/feeds/users/100stimmen/uploads?alt=json&max-results=9&orderby=viewCount', function(data){
        var feed = data.feed;
        var entries = feed.entry || [];
        for (var i = 0; i < entries.length; i++) {
            var entry = entries[i];
            var title = entry.title.$t.substr(0, 20);
            var description = entries[i].media$group.media$description.$t.substr(0, 100);
            var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
            var playerUrl = entries[i].media$group.media$content[0].url;
            var viewcount = entry.yt$statistics.viewCount;
            $('#videos').append('<li onclick="loadVideo(\'' + playerUrl + '\', true, ' + i + ')"><span class="titlec">' + title + '...</span><br /><img src="' + thumbnailUrl + '" width="130" height="97"/><br /><span class="views">Views: ' + viewcount + '</span><br><span class="desc">' + description + '</span></li>');
        }
    }).done(function(){
        // play first video
        $('#videos li').eq(0).click();
    });

});

// our video play function
function loadVideo(playerUrl, autoplay, index) {
    var $this = $('#videos li').eq(index);
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&showinfo=0&autohide=1&autoplay=' + 
        (autoplay?1:0), 
        'player', 
        '450', 
        '250', 
        '9.0.0', 
        false,
        false,
        {allowfullscreen: 'true'}
    );
    $('#desc').html($this.find('.desc').html());
}

</script>
</head>

<body>
<div class="wrapper">
    <div id="screen">
        <object id="player"></object>
    </div>
    <div id="desc"></div>
    <div>
        <ul id="videos"></ul>
    </div>
    <div class="cb"/>
</div>
</body>
</html>

UPDATE - 在我更新$ .json函数以使用$ .ajax之前，IE不喜欢该请求。我通过更改为ajax函数我做了一些改进，我能够关闭IE的缓存，并添加数据类型“jsonp”，允许IE进行跨域请求。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Youtube API Test</title>
<style>
.wrapper {width:800px; margin:auto;}
#screen {width: 100%; height: 250px; float: left;}
#videos {
    margin-bottom: 1em;
    padding-left : 0em;
    margin-left: 0em;
    list-style: none;
    display: block;
    float: left;
    width: 500px;
}
#videos li {
    float: left;
    width: 130px;
    height: 200px;
    margin-bottom: 1em;
    margin-right: 1.9em;
    cursor: pointer;
    line-height: 15px
}
#videos li span {
    font: 10px/11px arial, sans-serif;
}
.cb {clear:both;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // get youtube video feed
    $.ajax({
            url: "http://gdata.youtube.com/feeds/users/100stimmen/uploads?alt=json&max-results=9&orderby=viewCount",
            dataType: 'jsonp'
    }).done(function(data){
        var feed = data.feed;
        var entries = feed.entry || [];
        for (var i = 0; i < entries.length; i++) {
            var entry = entries[i];
            var title = entry.title.$t.substr(0, 20);
            var description = entries[i].media$group.media$description.$t.substr(0, 100);
            var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
            var playerUrl = entries[i].media$group.media$content[0].url;
            var viewcount = entry.yt$statistics.viewCount;
            $('#videos').append('<li onclick="loadVideo(\'' + playerUrl + '\', true, ' + i + ')"><span class="titlec">' + title + '...</span><br /><img src="' + thumbnailUrl + '" width="130" height="97"/><br /><span class="views">Views: ' + viewcount + '</span><br><span class="desc">' + description + '</span></li>');
        }
        // play first video
        $('#videos li').eq(0).click();
    });

});

// our video play function
function loadVideo(playerUrl, autoplay, index) {
    var $this = $('#videos li').eq(index);
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&showinfo=0&autohide=1&autoplay=' + 
        (autoplay?1:0), 
        'player', 
        '450', 
        '250', 
        '9.0.0', 
        false,
        false,
        {allowfullscreen: 'true'}
    );
    $('#desc').html($this.find('.desc').html());
}
</script>
</head>

<body>
<div class="wrapper">
    <div id="screen">
        <object id="player"></object>
    </div>
    <div id="desc"></div>
    <div>
        <ul id="videos"></ul>
    </div>
    <div class="cb"></div>
</div>
</body>
</html>

更新：这是对loadVideo函数的更新，它会阻止自动播放。

function loadVideo(playerUrl, autoplay, index) {
    var $this = $('#videos li').eq(index);
    console.log((autoplay?1:0));
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&showinfo=0&autohide=1&autoplay=0',
        'player', 
        '450', 
        '250', 
        '9.0.0', 
        false,
        false,
        {allowfullscreen: 'true'}
    );
    $('#desc').html($this.find('.desc').html());
}

点击获取Youtube视频说明（html.push）

1 个答案: