Jump to content



Photo

Convert Video Duration Number to Time with PHP or jQuery


  • Please log in to reply
19 replies to this topic

#1 Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 11:35

I'm loading the YouTube API by jQuery + JSON to get the video info of it's views and duration.

The duration number for example is 210 sample, but in actually time, it's 3:30. :)

The problem is, I'm not sure how to come by to converting the numbers to actually time, not even with PHP's strtotime since I believe jQuery would load too late for that. (Or I don't know at all.) :p


<div id="sidebar">
<h3>Related Videos</h3>
	<ul id="related-videos">
<?php $the_query = new WP_Query( array( 'posts_per_page' => '5', 'post_format' => 'post-format-video','category_name' => 'hip-hop') );
			while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
			 <li>
<a href="<?php the_permalink();?>">
<div class="side-thumb"><?php the_post_thumbnail('small'); ?></div>
				 <?php the_title(); ?><br />
						<script type="text/javascript">
$(document).ready(function () {
$.getJSON('http://gdata.youtube.com/feeds/api/videos/<?php echo getYouTubeIdFromURL(get_post_meta($post->ID,'video',true)); ?> ?v=2&alt=jsonc',function(data,status,xhr){
$("#yt_time-<?php echo get_the_ID(); ?>").html(data.data.duration);
$("#yt_views-<?php echo get_the_ID(); ?>").html(data.data.viewCount);
});
});
</script>
<span><div class="yt">Duration:&nbsp;</div><div id="yt_time-<?php echo get_the_ID(); ?>" class="yt"></div><div class="yt">&nbsp;|&nbsp;</div><div class="yt">Views:&nbsp;</div><div id="yt_views-<?php echo get_the_ID(); ?>"class="yt"></div></span>
</a>
				</li>
			<?php endwhile;wp_reset_postdata();?>
	</ul><!-- #related-videos -->
</div><!-- #sidebar -->

I think this is the solution, but I don't exactly know how to use it. This code is from Stack Overflow.

<?php date('Y-m-d H:i:s', strtotime(sprintf('- %d second', round($speed * 60)))); ?>

Here's a screenshot of what I'm working on. Check out the "Related Videos" on the bottom right.

Attached Images

  • Untitled.png



#2 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 10 October 2012 - 12:08

Something along these lines...
var seconds = 0,
    multiplier = 1,
    time = '3:30';

time = time.split(':');
while (time.length)
{
  seconds += multiplier * parseInt( time.pop() );
  multiplier *= 60;
}

Or a slight variation to cut out a line
var seconds = 0,
    multiplier = 1/60,
    time = '3:30';

time = time.split(':');
while (time.length)
{
  seconds += (multiplier *= 60) * parseInt( time.pop() );
}


#3 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 12:31

Sweet! But how do I implement it with this since it appends into a DIV? This is actually in a loop on WordPress, so it won't be a specific time.

$("#yt_views-<?php echo get_the_ID(); ?>").html(data.data.viewCount);


#4 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 10 October 2012 - 13:15

Put this somewhere in the document, along with the rest of your script:
function TimeFormatter (time) {
  this.base_time = time;
}

TimeFormatter.prototype = {

  in_seconds: function () {
	var seconds = 0,
		multiplier = 1/60;

	time = this.base_time.split(':');
	while (time.length)
	{
	  seconds += (multiplier *= 60) * parseInt( time.pop() );
	}

	return seconds;
  }

};

Then you can either use this to just print out the seconds directly
$("#yt_views-<?php echo get_the_ID(); ?>").html( new TimeFormatter( data.data.viewCount ).in_seconds() );
or create an instance of the object for use elsewhere:
var video_duration = new TimeFormatter( data.data.viewCount );
$("#yt_views-<?php echo get_the_ID(); ?>").html( video_duration.in_seconds() );


#5 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 13:22

The Console says

Uncaught TypeError: Object 1372224 has no method 'split' illigion.js:18
Uncaught TypeError: Object 19194 has no method 'split' illigion.js:18
Uncaught TypeError: Object 5789858 has no method 'split' illigion.js:18

It voids both duration & view no matter which I use or where I put it, as is.

#6 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 10 October 2012 - 14:21

In that case, `data.data.viewCount` isn't a string - can you post what the contents of that are? Drop this into the script:

console.log('data is a ' + typeof data); data.data && console.log('data.data is a ' + typeof data.data); data.data.viewCount && console.log('data.data.viewCount is a ' + typeof data.data.viewCount + ', and its value is: ' + data.data.viewCount);


#7 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 14:35

"data is a object"
"data data is a object"
"data data viewCount is a number, and its value is: 137224"


Oh, wait! I don't think viewCount was what I was thinking about. Back to duration, the error is being caused from that!




.html( new TimeFormatter( data.data.viewCount ).in_seconds() );

#8 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 10 October 2012 - 14:41

Ahaha, I'm not sure why I latched on to `.viewCount` there - that's my bad. Change it to `.duration` (ie. put it on the line above, which has duration) and that should work.

$("#yt_time-<?php echo get_the_ID(); ?>").html( new TimeFormatter( data.data.duration ).in_seconds() );
or
var video_duration = new TimeFormatter( data.data.duration );
$("#yt_time-<?php echo get_the_ID(); ?>").html( video_duration.in_seconds() );


#9 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 15:07

Haha, still no bueno. :p

Here, try it without PHP and using a direct url on YouTube! :D


$(document).ready(function () {
function TimeFormatter (time) {
this.base_time = time;
}

TimeFormatter.prototype = {

in_seconds: function () {
var seconds = 0,
multiplier = 1/60;

time = this.base_time.split(':');
while (time.length)
{
seconds += (multiplier *= 60) * parseInt( time.pop() );
}

return seconds;
}

};

$.getJSON('http://gdata.youtube.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc',function(data,status,xhr){
// new code
var video_duration = new TimeFormatter( data.data.duration );
$("#yt_time").html( video_duration.in_seconds() );
// end new code
$("#yt_views").html(data.data.viewCount);
});
});

var seconds = 210,
multiplier = 1/60,
time = '3:30';

time = time.split(':');
while (time.length)
{
seconds += (multiplier *= 60) * parseInt( time.pop() );
}




<div id="yt_time"></div>
<div id="yt_views"></div>



#10 +Heartripper

Heartripper

    Neowinian

  • Joined: 10-December 09
  • Location: Italy
  • OS: Windows 8.1
  • Phone: Nokia Lumia 925

Posted 10 October 2012 - 15:22

Sorry but you want to convert 210 to 3:30 or the other way around?

#11 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 15:24

Sorry but you want to convert 210 to 3:30 or the other way around?


210 to 3:30

Check out the API data and find "duration"

http://gdata.youtube...M?v=2&alt=jsonc

#12 +Heartripper

Heartripper

    Neowinian

  • Joined: 10-December 09
  • Location: Italy
  • OS: Windows 8.1
  • Phone: Nokia Lumia 925

Posted 10 October 2012 - 15:28

210 to 3:30

Check out the API data and find "duration"

http://gdata.youtube...M?v=2&alt=jsonc


Ok i van write you the code but atm i'm on my Phone :-(

#13 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 15:31

Ok i van write you the code but atm i'm on my Phone :-(


Take your time broski. :)

For the both of you. Here's where you can see and work it out! :D Everything's locked out but that page since I have it all in re-development.

http://illingspree.c...es-music-video/

#14 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 10 October 2012 - 15:49

O_o Apparently I read it totally wrong, my code converts the other way - 3:30 to 210. If this is still waiting for an answer when I get home, I'll sit down and write it.

#15 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 10 October 2012 - 15:54

O_o Apparently I read it totally wrong, my code converts the other way - 3:30 to 210. If this is still waiting for an answer when I get home, I'll sit down and write it.


Haha it's okay. Yea, I'm still in a confusion on it here. I'm definitely going to need some help on that and maybe writing commas on the view count to make it a little more readable.