如何使用 javascript 和 youtube api 使文本可点击答案

【问题标题】：How to make text using javascript and youtube api clickable如何使用 javascript 和 youtube api 使文本可点击
【发布时间】：2013-01-17 12:03:47
【问题描述】：

现在我有一个基本的 html 页面，它使用 youtubes api 获取最受欢迎的视频。到目前为止，它显示了视频的标题，但我正在尝试使这些标题可点击。如果点击标题，它们就会被带到实际 youtube 上的视频中。我知道理论上我可以找到最受欢迎的视频然后做一个可点击的链接，但我希望每次使用 youtube api 找到一个新的流行视频时或多或少地自动更新。现在我有这个基本代码。

<html>
<head>
<title>My Videos</title>
<style>
.titlec {
    font-size: small;
}
ul.videos li {
    float: left;
    width: 10em;
    margin-bottom: 1em;
}
ul.videos {
    margin-bottom: 1em;
    padding-left : 0em;
    margin-left: 0em;
    list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">

function showData(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 thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    html.push('<span class="titlec">', title, '...</span><br /></span></li>');
  }
// html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
  <object id="player">
  </object>
</div>
<div id="videos2"></div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>

【问题讨论】：

标签： javascript html json youtube-api

【解决方案1】：

我不确定我是否完全理解您想要实现的目标，但我创建了一个jsfiddle！

代码如下：

<html>    
<head>
    <title>My Videos</title>
    <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        function showData(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);
        html.push('<li class="titlec"><a href="javascript:void(0);" onClick="loadVideo('+"'"+ entry.media$group.media$content[0].url +"'"+');">' + title + '</a></li>');
            }

            document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
            if (entries.length > 0) {
                loadVideo(entries[0].media$group.media$content[0].url);
            }
        }

        function loadVideo(e) {
            var container = document.getElementById('playerContainer');
            var player = document.getElementById('player');
            container.removeChild(player);//remove object child
            player.setAttribute('data',e);//change link
            container.appendChild(player);//add object back
        }
    </script>
</head>

<body>
    <div id="playerContainer" style="width: 20em; height: 180px; float: left;">
        <object id="player"></object>
    </div>
    <div id="videos2"></div>
    <script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">

    </script>
</body>

【讨论】：