我正在尝试在网页上制作youtube视频网格，网格本身将由视频的缩略图组成 - 一旦我点击它们，视频就会打开。
我快要结束了，但是我已经遇到了一条似乎无法过去的大墙 - 我是一名业余程序员。
因此，一旦我从youtube api获取json数据，我就使用了datacontractjsonserializer类来存储我定义的类中的所有信息。这基本上留下了我的一系列项目 - 视频 - 我可以通过它来做任何事情。
我希望能够运行视频数组，并且每次都创建一个新的并且还添加属性，例如给它一个css类等。这样的网站不限于一定数量视频，可以显示youtube api返回的数量。
任何想法表示感谢，
这是我到目前为止所拥有的;
foreach (var vid in playlist.items)
{
System.Web.UI.HtmlControls.HtmlGenericControl createDiv =
new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
createDiv.Style = "float: left";
System.Web.UI.HtmlControls.HtmlImage img =
new System.Web.UI.HtmlControls.HtmlImage();
img.Src = vid.snippet.thumbnails.@default.url;
img.Border = 0;
img.Style = "width:80px; height:55px; margin-right:10px; margin-bottom:10px;";
createDiv.InnerHtml = img;
}
上面的代码根本就没有编译，即使它完成也无法工作。
我还为缩略图
创建了一个图像 System.Web.UI.HtmlControls.HtmlImage img =
new System.Web.UI.HtmlControls.HtmlImage();
img.Src = vid.snippet.thumbnails.@default.url;
需要存储在div类中。我还需要他们遵循某些CSS样式 - 我如何将它链接到我的CSS表？
我基本上试图复制
<div class="imgGrid" style="float:left"><a href="XXXX " class="play_youtube iframe" title="XXXX">
<img src="AAAA " class="thumbnail" style="width: 80px; height: 55px; margin-right: 10px; margin-bottom: 10px;" border="0" />
</a>
</div>
。从yt api检索XXXX和AAAA数据的地方。
根据要求，这是json响应的示例
{
"kind": "youtube#playlistItemListResponse",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/b7tV9rFfqslF-60lBe43V9qWMqA\"",
"nextPageToken": "CAUQAA",
"pageInfo": {
"totalResults": 26,
"resultsPerPage": 5
},
"items": [
{
"kind": "youtube#playlistItem",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/5sFoyW9dWRWrqgXNUY935g7zYGw\"",
"id": "UkQwOVI4XzJuSnRqZy4wOVI4XzJuSnRqZw==",
"snippet": {
"publishedAt": "2015-01-14T15:00:11.000Z",
"channelId": "UCBR8-60-B28hp2BmDPdntcQ",
"title": "Maroon 5 - Sugar",
"description": "Buy Sugar on iTunes: http://smarturl.it/M5V\n\nTickets for Maroon 5’s North American with Rozzi Crane and European Tour with Nick Gardner are on-sale now! http://www.maroon5.com/\n\nMusic video by Maroon 5 performing Sugar. (C) 2015 Interscope Records",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/09R8_2nJtjg/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/09R8_2nJtjg/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/09R8_2nJtjg/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/09R8_2nJtjg/sddefault.jpg",
"width": 640,
"height": 480
}
},
"channelTitle": "YouTube Spotlight",
"playlistId": "RD09R8_2nJtjg",
"position": 0,
"resourceId": {
"kind": "youtube#video",
"videoId": "09R8_2nJtjg"
}
}
},
{
"kind": "youtube#playlistItem",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/8qf4tj_LOI5PwxemtJWYiNACZ5s\"",
"id": "UkQwOVI4XzJuSnRqZy5PUGYwWWJYcURtMA==",
"snippet": {
"publishedAt": "2014-11-19T14:00:18.000Z",
"channelId": "UCBR8-60-B28hp2BmDPdntcQ",
"title": "Mark Ronson - Uptown Funk ft. Bruno Mars",
"description": "Mark Ronson – Uptown Funk ft. Bruno Mars\nFrom the album Uptown Special, out now: http://smarturl.it/UptownSpecial?IQid=yt \n\n-------------------------\n\nFollow Mark Ronson online:\nWebsite: http://www.markronson.co.uk\nTwitter: http://twitter.com/MarkRonson\nFacebook: http://www.facebook.com/markronson\nInstagram: http://instagram.com/iammarkronson\nSpotify: http://smarturl.it/RonsonStrm?IQid=yt\n\nMusic video by Mark Ronson feat. Bruno Mars performing Uptown Funk. (C) 2014 Sony Music Entertainment UK Ltd.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/OPf0YbXqDm0/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/OPf0YbXqDm0/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/OPf0YbXqDm0/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/OPf0YbXqDm0/sddefault.jpg",
"width": 640,
"height": 480
}
},
"channelTitle": "YouTube Spotlight",
"playlistId": "RD09R8_2nJtjg",
"position": 1,
"resourceId": {
"kind": "youtube#video",
"videoId": "OPf0YbXqDm0"
}
}
},
{
"kind": "youtube#playlistItem",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/k0QjzQlUFBtx9xt7sa3G8xyGFwc\"",
"id": "UkQwOVI4XzJuSnRqZy5BSnREWElhenJNbw==",
"snippet": {
"publishedAt": "2015-01-22T08:00:06.000Z",
"channelId": "UCBR8-60-B28hp2BmDPdntcQ",
"title": "Ellie Goulding - Love Me Like You Do (Official Video)",
"description": "iTunes: http://ell.li/EGLMLYDiTYT\nSpotify: http://ell.li/LMLYDspotify\n\nFrom the forthcoming Fifty Shades of Grey film and soundtrack.\n\nMore Ellie:\nhttp://www.elliegoulding.com\nhttp://www.facebook.com/elliegoulding\nhttp://www.twitter.com/elliegoulding\nhttp://www.instagram.com/elliegoulding\nhttps://play.spotify.com/user/elliegouldingofficial\n\n\nMusic video by Ellie Goulding performing Love Me Like You Do. (C) 2015 Polydor Ltd. (UK)",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/AJtDXIazrMo/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/AJtDXIazrMo/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/AJtDXIazrMo/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/AJtDXIazrMo/sddefault.jpg",
"width": 640,
"height": 480
},
"maxres": {
"url": "https://i.ytimg.com/vi/AJtDXIazrMo/maxresdefault.jpg",
"width": 1280,
"height": 720
}
},
"channelTitle": "YouTube Spotlight",
"playlistId": "RD09R8_2nJtjg",
"position": 2,
"resourceId": {
"kind": "youtube#video",
"videoId": "AJtDXIazrMo"
}
}
},
{
"kind": "youtube#playlistItem",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/eAcdGURRFc7MFSYaeTUSnzUQtU8\"",
"id": "UkQwOVI4XzJuSnRqZy5lLU9SaEVFOVZWZw==",
"snippet": {
"publishedAt": "2014-11-10T17:05:44.000Z",
"channelId": "UCBR8-60-B28hp2BmDPdntcQ",
"title": "Taylor Swift - Blank Space",
"description": "Watch Taylor's new video for \"Blank Space\". No animals, trees, automobiles or actors were harmed in the making of this video. Taylor’s new release 1989 is Available Now on iTunes http://www.smarturl.it/TS1989.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/e-ORhEE9VVg/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/e-ORhEE9VVg/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/e-ORhEE9VVg/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/e-ORhEE9VVg/sddefault.jpg",
"width": 640,
"height": 480
},
"maxres": {
"url": "https://i.ytimg.com/vi/e-ORhEE9VVg/maxresdefault.jpg",
"width": 1280,
"height": 720
}
},
"channelTitle": "YouTube Spotlight",
"playlistId": "RD09R8_2nJtjg",
"position": 3,
"resourceId": {
"kind": "youtube#video",
"videoId": "e-ORhEE9VVg"
}
}
},
{
"kind": "youtube#playlistItem",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/v5Vm-iso_u1p8rya8nb-IevUHGQ\"",
"id": "UkQwOVI4XzJuSnRqZy5scC1FTzVJNjBLQQ==",
"snippet": {
"publishedAt": "2014-10-07T13:57:37.000Z",
"channelId": "UCBR8-60-B28hp2BmDPdntcQ",
"title": "Ed Sheeran - Thinking Out Loud [Official Video]",
"description": "The official video for 'Thinking Out Loud', Ed learnt to dance! \n'x', available to buy via iTunes here: http://smarturl.it/x-itunesdlx\nFeaturing and taught by @dance10Brittany and @dance10Paul\n\nSubscribe to my channel: http://bit.ly/SubscribeToEdSheeran\nGo behind the scenes of the video: http://bit.ly/ThinkingOutLoudBTS\nHear the rest of my album, 'x': http://bit.ly/XOfficialPlaylist\nAudio of 'Thinking Out Loud': http://youtu.be/WpyfrixXBqU\n\nHey German fans! View here: http://smarturl.it/ThinkingOutLoud-DE\n\nBuy on CD & Vinyl here: http://smarturl.it/x-album\nBuy on Google Play: http://smarturl.it/x-googleplaydlx\n\nFollow me on...\nFacebook: http://www.facebook.com/EdSheeranMusic\nTwitter: http://twitter.com/edsheeran\nInstagram: http://instagram.com/teddysphotos\nOfficial Website: http://edsheeran.com",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/lp-EO5I60KA/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/lp-EO5I60KA/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/lp-EO5I60KA/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/lp-EO5I60KA/sddefault.jpg",
"width": 640,
"height": 480
},
"maxres": {
"url": "https://i.ytimg.com/vi/lp-EO5I60KA/maxresdefault.jpg",
"width": 1280,
"height": 720
}
},
"channelTitle": "YouTube Spotlight",
"playlistId": "RD09R8_2nJtjg",
"position": 4,
"resourceId": {
"kind": "youtube#video",
"videoId": "lp-EO5I60KA"
}
}
}
]
}
答案 0 :(得分：1)
修改了错误的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home :: Website Name</title>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css' />
<link href="/styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<header>
<div id="header-content">
<div id="header-left">
<h1 id="header-title"><a href="/" id="header-title">Website Name</a></h1>
</div>
<div class="searchbar-wrapper">
<form class="searchbar-wrapper">
<input id="searchbar" type="search">
</form>
</div>
<div id="header-right">
<nav>
<a class="nav" href="/road/">Road</a>
<a class="nav" href="/rail/">Rail</a>
<a class="nav" href="/air/">Air</a>
<a class="nav" href="/sea/">Sea</a>
</nav>
</div>
</div>
</header>
<div id="content-wrapper">
<aside>
<div class="sidebarContainer">
<img src="/assets/10646866_863581873661627_2031997718155527748_n (1).jpg" height="40px" width="40px" style="border-radius:20px;float:left;" />
<div style="float:left;margin:8px 10px 0;">
<h2>Hello again, Allan!</h2>
</div>
</div>
<div class="sidebarContainer">
<h3>Your Profile</h3>
<ul class="ul-links">
<a href="/" class="li-links">
<li class="li-linklist">Timeline Posts</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">Messages</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">Notifications</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">Events</li>
</a>
</ul>
</div>
<div class="sidebarContainer">
<h3>Road Favourites</h3>
<ul class="ul-links">
<a href="/" class="li-links">
<li class="li-linklist">R178 NPN (Volvo B6BLE)</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">WG65 DDU (ADL Enviro 400)</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">CK03 TWD (Vauxhall Astra)</li>
</a>
</ul>
</div>
<div class="sidebarContainer">
<h3>Rail Favourites</h3>
<ul class="ul-links">
<a href="/" class="li-links">
<li class="li-linklist">Timeline Posts</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">Messages</li>
</a>
<a href="/" class="li-links">
<li class="li-linklist">Notifications</li>
</a>
</ul>
</div>
</aside>
<section class="wSidebar">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
</section>
</div>
</div>
<div style="clear:both;"></div>
<footer>
<div class="footer-wrapper">
<div id="footer-left">
<p>Copyright Information</p>
</div>
<div id="footer-right">
<p>Footer Menu</p>
</div>
<div style="clear:both;"></div>
</div>
</footer>
</body>
</html>ASPX：
System.Web.UI.HtmlControls.HtmlGenericControl createDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
createDiv.Style.Add("float", "left");
System.Web.UI.HtmlControls.HtmlImage img =
new System.Web.UI.HtmlControls.HtmlImage();
img.Src = "Your source code.";
img.Border = 0;
img.Style.Add("width", "80px");
img.Style.Add("margin-right", "10px");
img.Style.Add("margin-bottom", "10px");
createDiv.Controls.Add(img);
tstPanel.Controls.Add(createDiv);
至少这是编译并在我的最终工作。