Как добавить видео и его описание из Json в элементы DOM в javascript?
У меня есть простая боковая панель, на которой я хочу отображать несколько видео из json, а пока я хочу просто показать заголовок и видео из json примерно так, как показано ниже.
Вот что у меня есть до сих пор.
<ul class = "sidebar">
<li>
<h1 class = "title"></h1>
<video id = "video_list" src = ""></video>
</li>
</ul>
вот джаваскрипт
$(function() {
var movies = [{
"title": "travel",
"left": 201,
"top": 209,
"movieid": "10",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [{
"left": 81,
"top": 51,
"start_time": 1,
"end_time": 2,
"buttonid": "10_1",
"btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
}]
},
{
"title": "ecommerce",
"movieid": "20",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [{
"left": 0,
"top": 0,
"start_time": 1,
"end_time": 2,
"width": '200',
"height": '60',
"buttonid": "20_1",
}]
},
];
function getVideoList() {
var title = $('.title');
var videoID = $('.video_list');
$.each(movies, function(index, dataValue) {
var movie_title = $("h1", {
value: dataValue.movieid
}).html(dataValue.title).appendTo(title);
var movie_video = $("#video_list", {
}).html(dataValue.movie_url).appendTo(videoID);
});
}
getVideoList();
});
Вот jsfiffle: живая демонстрация Я могу отображать заголовки видео для каждого фильма, но я изо всех сил пытаюсь отобразить как заголовок, так и соответствующее видео, как в json :(
Что я должен изменить, чтобы получить то, что я хочу???
как видите, я пробовал, но не работает :(
Я не вижу элемента видео в приведенном выше коде.
что ты имеешь в виду, ты не видишь элемент видео ?? ` <video id = "video_list" src = ""></video>` ??? а в json есть ссылка на видео: `"movie_url": "techslides.com/demos/sample-videos/small.mp4", `
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваш цикл не определяет каждый элемент. Если вы хотите <li> для каждого заголовка и видео, вам нужно сделать что-то другое. Рассмотрите возможность создания функции, которая создает шаблон для каждого контейнера.
Рабочий пример: https://jsfiddle.net/Twisty/e2q4kd13/12/
HTML
<ul class = "sidebar">
</ul>
JavaScript
$(function() {
var movies = [{
"title": "travel",
"left": 201,
"top": 209,
"movieid": "10",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [{
"left": 81,
"top": 51,
"start_time": 1,
"end_time": 2,
"buttonid": "10_1",
"btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
}]
},
{
"title": "ecommerce",
"movieid": "20",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [{
"left": 0,
"top": 0,
"start_time": 1,
"end_time": 2,
"width": '200',
"height": '60',
"buttonid": "20_1",
}]
}
];
function formatTitle(t) {
var nt = t[0].toUpperCase();
nt += t.slice(1);
return nt;
}
function makeListItem(v, p) {
var li = $("<li>");
var title = $("<h1>", {
class: "title",
for: "video_" + v.movieid
}).html(formatTitle(v.title)).appendTo(li);
var vObj = $("<video>", {
id: "video_" + v.movieid,
src: v.movie_url
}).appendTo(li);
li.appendTo(p);
}
function getVideoList() {
$.each(movies, function(index, dataValue) {
makeListItem(dataValue, $(".sidebar"));
});
}
getVideoList();
});
В вашем скрипте список видео повторяется, и данные для каждого видео отправляются в функцию. Затем функция создает новый <li> для каждого видео. Он будет содержать элемент <h1> для заголовка и элемент <video>. Затем все это добавляется в контейнер списка.
Результирующий HTML
<ul class = "sidebar">
<li>
<h1 class = "title" for = "video_10">Travel</h1>
<video id = "video_10" src = "http://techslides.com/demos/sample-videos/small.mp4"></video>
</li>
<li>
<h1 class = "title" for = "video_20">Ecommerce</h1>
<video id = "video_20" src = "http://techslides.com/demos/sample-videos/small.mp4"></video>
</li>
</ul>
Надеюсь, это поможет.
Ур БОГ бро, большое спасибо, именно то, что я хотел
Если у вас будет время, проверьте эту тему: stackoverflow.com/questions/56675821/…
@user9964622 user9964622 Буду, когда будет время. Мои первоначальные мысли заключаются в том, что вам нужно действительно смотреть на общий дизайн. Ваша боковая панель должна содержать ссылки на видео, а не сами элементы видео.
Кто-нибудь, помогите, нужно было добавить только один код строки, видео содержит ссылки
Привет, Твисти, ты можешь это проверить?? stackoverflow.com/questions/56708370/…
Вы должны создать динамически новый элемент для каждого элемента в списке.
Javascript:
var movies = [{
"title": "travel",
"url": "http://techslides.com/demos/sample-videos/small.mp4"
}, {
"title": "ecommerce",
"url": "http://techslides.com/demos/sample-videos/small.mp4"
}];
var sidebar = $('.sidebar');
movies.forEach(function(movie) {
sidebar.append('<li><h1>' + movie.title + '</h1><video src = "' + movie.url + '"></video></li>');
});
HTML
<ul class = "sidebar"></ul>
Рабочая демонстрация: https://jsfiddle.net/omg0zkct/3/
Ага. Мне удалось то же, что и вам, когда я искал ответ, хотя хорошее решение
поэтому создайте элемент видео и добавьте его?