Я делаю плейлист для видео, как youtube для моего гибридного приложения. Я заполняю/отображаю данные с помощью каждой функции и добавляю их из json-данных, созданных веб-сервером.JQuery - изменить содержимое div-класса на детали щелкнутого видео
У меня есть образец 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);
});
код работает отлично и отображает основное видео и список видео (миниатюр) ниже. Когда я нажимал на любой из миниатюр, основное видео может изменяться в соответствии с URL-адресом YouTube, который он содержит. Это работает нормально. Вот как это выглядит.
Добавлено: Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/
Моя проблема теперь о том, как показать детали (видео название, описание, дата и т.д.) на видео я щелкнул. Так что первичная информация о видео может быть изменена тоже * (не только видео) *. Есть ли способ изменить детали в зависимости от того, какое видео я нажал, используя jquery? Надеюсь, вы понимаете мою проблему. Спасибо!
Редактировать: Я открыт для любого предложения о том, как я могу лучше разработать этот плейлист или что я должен учитывать, чтобы сделать эту тренировку. Благодарю.
Спасибо за ваш ответ, но я parseerror при добавлении толчок массив в коде. –
э-э ... вы могли бы предоставить более подробное описание? возможно, я мог бы дать помощь – Carr
oops. его странно, теперь ошибка 'video_inf_array' не определяется, когда я нажимаю миниатюру ... –