Как воспроизвести видео YouTube с JSON - PullRequest
0 голосов
/ 28 октября 2019

У меня есть файл 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...