如何使用javascript和youtube api使文本可点击_Javascript_Html_Json_Youtube Api

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

javascript html json youtube-api

如何使用javascript和youtube api使文本可点击,javascript,html,json,youtube-api,Javascript,Html,Json,Youtube Api,现在我有了一个基本的html页面，可以使用YouTubesAPI获取最流行的视频。到目前为止，它显示的视频标题，但我正试图使这些标题点击。如果点击了标题，它们就会出现在youtube上的视频中。我知道理论上我可以找到最流行的视频，然后做一个可点击的链接，但我希望每次通过youtube api找到新的流行视频时，这个链接或多或少都会自动更新。现在我有了这个基本代码 <html> <head> <title>My Videos</title> <

现在我有了一个基本的html页面，可以使用YouTubesAPI获取最流行的视频。到目前为止，它显示的视频标题，但我正试图使这些标题点击。如果点击了标题，它们就会出现在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>


我的视频
.蒂特勒{
字体大小：小；
}
李先生{
浮动：左；
宽度：10em；
边缘底部：1米；
}
ul视频{
边缘底部：1米；
左侧填充：0em；
左边距：0em；
列表样式：无；
}
函数showData（数据）{
var feed=data.feed；
var entries=feed.entry | |[]；
var html=['']；
对于（变量i=0；i”）；
}
//html.push（“

”）；
document.getElementById（'videos2'）。innerHTML=html.join（“”）；
如果（entries.length>0）{
loadVideo（条目[0]。媒体$组。媒体$内容[0]。url，false）；
}
}

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

代码如下：

<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>


我的视频
函数showData（数据）{
var feed=data.feed；
var entries=feed.entry | |[]；
var html=['']；
对于（变量i=0；i）；
}
document.getElementById（'videos2'）。innerHTML=html.join（“”）+'；
如果（entries.length>0）{
loadVideo（条目[0].media$组.media$内容[0].url）；
}
}
函数加载视频（e）{
var container=document.getElementById（'playerContainer'）；
var player=document.getElementById（'player'）；
container.removeChild（player）；//删除对象子对象
player.setAttribute（'data'，e）；//更改链接
container.appendChild（player）；//将对象添加回
}