FeelRightz
FeelRightz

Reputation: 2979

Select value inside object

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>

Upvotes: 0

Views: 305

Answers (1)

Xotic750
Xotic750

Reputation: 23472

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>

Upvotes: 1

Related Questions