0

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

现在我想添加 yt-video 描述,但不是作为列表项的一部分(已经可以正常工作),而是在播放器旁边。这意味着我必须将“描述”值添加到 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) 在 loadVideo 函数中添加 'description' 值并打印出描述。

2) 还将“描述”添加到定义点击事件onclick="loadVideo()"的 html.push 块中。这对我来说是最大的问题,我无法获得正确的语法来传递描述值。

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

嗯,这就是我到目前为止所拥有的。有人知道如何显示点击视频的描述吗?

4

1 回答 1

0

我已经写了一些非常相似的东西,但取决于 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>
    

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

    <!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());
    }
    
  • 于 2013-05-06T22:22:03.937 回答