Question

我正在为我的混合应用制作像youtube的视频播放列表。我使用每个函数填充/显示数据，并从Web服务器抛出的json数据中附加它们。

我在这里有一个示例json数据：

[{"video_id":"1","video_youtube_title":"This is the latest video",
"video_youtube_description":"Discription for the primary video.",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/aVS4W7GZSq0/hqdefault.jpg",
"video_youtube_date_published":"2016-07-15 13:37:00",
"video_youtube_duration":"PT16M15S",
"video_youtube_link":"aVS4W7GZSq0",
"video_fb_link":"example/posts/1715658608683485",
"video_date_added":"2016-07-14 23:45:58"}]
,
[{
"video_id":"2",
"video_youtube_title":"Title 1",
"video_youtube_description":"Description1",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-07 15:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"kPDnw3_1GOI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 07:00:00"}
,
{
"video_id":"3",
"video_youtube_title":"Title 2",
"video_youtube_description":"Description2",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-08 16:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"dRjE1JwdDLI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 06:00:00"}]

所以第一个数组是主视频，下一个数组是列表视频。

以下是我在主视频中附加数据的示例代码：

var primary_videolink = (data[1][0].video_youtube_link);
var primary_videodescription = (data[1][0].video_youtube_description);
var primary_videodatepublished = (data[1][0].video_youtube_date_published);
var primary_videotitle = (data[1][0].video_youtube_title);

 $('#primary-video').append('<iframe id="video" width="100%" height="auto"       src="https://www.youtube.com/embed/'+ primary_videolink + '" frameborder="0" allowfullscreen></iframe>'+
    '<div class="primary-video-details-wrap">'+
    '<div class="primary-videotitle"> '+primary_videotitle+' <i class="fa fa-check-square" aria-hidden="true"></i></div>'+
    '<div class="primary-videodatepublished"> Published on '+primary_videodatepublished +'</div>'+         '<div class="primary_videodescription">'+primary_videodescription+'</div>'+            
'</div>'
);

以下是我在视频列表中附加数据的示例代码：

$.each(data[2], function(i, row) {
  var video_link = row.video_youtube_link;
  var video_img = row.video_youtube_thumbnail;
  var video_title = row.video_youtube_title;
  var video_description = row.video_youtube_description;
  var video_duration = row.video_youtube_duration;
  var video_published = row.video_youtube_date_published;

  var str = "<div class='video-list-wrapper'>";
   str += "<div class='video-wrap'>";
   str += "<div class='left-video-info'><a href=#null onclick=document.getElementById('video').src='http://www.youtube.com/embed/"+video_link+"'><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";                 
   str += "<div class='right-video-info'>";
   str += "<div class='video-title'>"+video_title+"</div>";
   str += "<div class='video-date'>"+ video_published +" ago</div>";
   str += "</div>";//right-info 
   str += "</div>";//video-wrap
   str += '</div>';
  $('#video-list').append(str); 
});

代码工作正常，它会在其下方显示主视频和视频列表（缩略图）。当我点击任何缩略图时，主视频将能够根据其包含的youtube网址进行更改。这工作正常。这就是它的样子。

已添加：Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/

我现在的问题是如何显示我点击的视频的详细信息（视频标题，说明，日期等）。因此，主视频细节也可能会改变*（不仅仅是视频）*。有没有办法可以根据我用jquery点击的视频来改变细节？我希望你理解我的问题。谢谢！

编辑：我愿意接受有关如何更好地开发此视频播放列表的建议，或者我应该考虑如何进行此项操作。感谢。

Answer 1

我尽可能少地编写并修改了一些代码，但实现了你想要的，也许你可以看看：

var video_inf_array = [];
$.each(data[2], function(i, row) {

  var video_link = row.video_youtube_link;
  var video_img = row.video_youtube_thumbnail;
  var video_title = row.video_youtube_title;
  var video_description = row.video_youtube_description;
  var video_duration = row.video_youtube_duration;
  var video_published = row.video_youtube_date_published;

  var all_video_inf = {   // an object to carry one video's all information
    video_link : video_link,
    video_img : video_img ,
    video_title : video_title ,
    video_description : video_description ,
         // ... all key value above ,and maybe u wanna simplify it like 'video_published : row.video_youtube_date_published'
  }

  var str = "<div class='video-list-wrapper'>";
   str += "<div class='video-wrap'>";
   str += "<div class='left-video-info'><a href=#null onclick=\"replace_to_primary("+i+")\"><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";                 
   str += "<div class='right-video-info'>";
   str += "<div class='video-title'>"+video_title+"</div>";
   str += "<div class='video-date'>"+ timeago(date)+" ago</div>";
   str += "</div>";//right-info 
   str += "</div>";//video-wrap
   str += '</div>';
  $('#video-list').append(str);

  video_inf_array.push(all_video_inf);   //push this video's information to an array
});

function replace_to_primary(index){

  $('#video').attr('src',video_inf_array[index].video_link);
  $('.primary-videotitle').text(video_inf_array[index].video_title);
  $('.primary_videodescription').text(video_inf_array[index].video_description);

  // ... handle other information like above pattern .

}

=============================================== ============================

很抱歉迟到提供正确答案，首先，我会尽可能少地修改，但现在我再修改一下以便清楚地说明这一点有一种说法是使用onClick（）是一种不好的做法，here is why。

所以我用更多的jquery来做，index() api是关键，也许你想看看更多=）这是一个JSFiddle：https://jsfiddle.net/Carr1005/pusyyen1/2/

Jquery - 将div类的内容更改为单击视频的详细信息

1 个答案: