19 replies to this topic

[Mr.XXIV]

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.)

<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

• 

[JoeC]

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() );
}

[Mr.XXIV]

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);

[JoeC]

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() );

[Mr.XXIV]

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.

[JoeC]

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);

[Mr.XXIV]

"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() );

[JoeC]

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() );

[Mr.XXIV]

Haha, still no bueno.

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

$(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>

[+Heartripper]

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

[Mr.XXIV]

Heartripper, on 10 October 2012 - 15:22, said:

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

[+Heartripper]

MrXXIV, on 10 October 2012 - 15:24, said:

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 :-(

[Mr.XXIV]

Heartripper, on 10 October 2012 - 15:28, said:

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! Everything's locked out but that page since I have it all in re-development.

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

[JoeC]

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.

[Mr.XXIV]

JoeC, on 10 October 2012 - 15:49, said:

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.