Select value inside object

Question

How can I get the second value from videoid:uoSDF234and make it countdown ?

1. first I need "videoid":"uoSDF234" be the first countdown then next will be "videoid":"0apq3ss" and so on (if I add more data).
2. when I click the stop button, label id="vstopresult" will show the stopped videoid and second.
3. the countdown will looping for each videoid in videolist.

var videoinfo = [{"startdatetime":"2014-12-21 00:23:14","totalsecondrun":"2019402310","videolist":
[{"videoid":"uoSDF234","second":"10"},{"videoid":"0apq3ss","second":"14"}]}]; 
// JavaScript Document

var calduration = function(){
  $.each(videoinfo, function(i, obj) {
   $("#vstart").append(obj.startdatetime);
   $("#vtotoals").append(obj.totalsecondrun);
   
   $("#vid").append(videoinfo[0].videolist[0].videoid);
   $("#vlefts").append(videoinfo[0].videolist[0].second);

     var output = $("#vlefts");
     var isPaused = false;
     var time = videoinfo[0].videolist[0].second;
     var t = window.setInterval(function() {
      if(!isPaused) {
       time--;
       output.text(time);
      }
      if (time == 0){
       clearInterval(t);
      }
     }, 1000);
     
     //with jquery
     $("#vpause").on('click', function(e) {
      e.preventDefault();
      isPaused = true;
     });
     
     $("#vplay").on('click', function(e) {
      e.preventDefault();
      isPaused = false;
     });
     
     $("#vstop").on('click', function(e) {
      clearInterval(t);
      $("#vstopresult").append(time);
     });
    
  });
               

};
  
  
calduration();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
         <label id="vstart"></label><br>
         <label id="vtotoals"></label><br>
            <label id="vid"></label><br>
            <label id="vlefts"></label><br>
            <input type="button" value="play" id="vplay"/>
            <input type="button" value="pause" id="vpause"/>
            <input type="button" value="stop" id="vstop"/><br>
            <label id="vstopresult"></label>
        </div>

Answer 1

One crude possibility is to use setInterval, an example may be.

var videoinfo = [{
        "startdatetime": "2014-12-21 00:23:14",
        "totalsecondrun": "2019402310",
        "videolist": [{
            "videoid": "uoSDF234",
            "second": "10"
        }, {
            "videoid": "0apq3ss",
            "second": "14"
        }]
    }],
    index = 0,
    timerEl = document.getElementById('timer'),
    countDown = 0,
    intervalId;

function startCountdown() {
    if (index < videoinfo[0].videolist.length) {
        countDown = videoinfo[0].videolist[index].second;
        intervalId = setInterval(function () {
            timerEl.textContent = countDown;
            if (countDown < 1) {
                clearInterval(intervalId);
                index += 1;
                setTimeout(function () {
                    startCountdown();
                }, 1000);
            } else {
                countDown -= 1;
            }
        }, 1000);
    }
}

startCountdown();

<div id='timer'></div>