У меня есть файл json
, и в нем есть youtube video id
. Пожалуйста, предложите мне код, который воспроизводит видео с этого json
В верхней части html page
, пожалуйста, добавьте html video player
код с кнопкой next/previous
я делюсь своим кодом
JSON FILE
{"video":[{"Id":"1","videoName":"VIDEO 1","date":"26 OCT 2019","time":"9:58 PM","video":"QYKYN8JLZmA","image":"https:\/\/img.youtube.com\/vi\/QYKYN8JLZmA\/0.jpg","videoType":"video","videoDuration":"02:08:88","liveStatus":"offline","testId":"0"},
{"Id":"2","videoName":"VIDEO 2","date":"27 OCT 2019","time":"8:52 PM","video":"3Chvp7jxJJg","image":"https:\/\/img.youtube.com\/vi\/3Chvp7jxJJg\/0.jpg","videoType":"video","videoDuration":"02:81:18","liveStatus":"offline","testId":"0"},
{"Id":"3","videoName":"VIDEO 3","date":"28 OCT 2019","time":"3:43 PM","video":"gbb1czEabc4","image":"https:\/\/img.youtube.com\/vi\/gbb1czEabc4\/0.jpg","videoType":"video","videoDuration":"00:00","liveStatus":"offline","testId":"0"}]}
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var people = [];
$.getJSON('videolist.json', function(data) {
$.each(data.video, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.Id + "</td>" +
"<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" + "<td>" + f.video + "</td>" + "<td>" + f.image + "</td>" +
"<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td>"+ "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="25">
<thead>
<th>ID</th>
<th>VIDEO NAME</th>
<th>DATE</th>
<th>TIME</th>
<th>VIDEO LINK</th>
<th>VIDEO IMAGE</th>
<th>DURACTION</th>
<th>LIVE STATUS</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>