Jump to content

Question

Posted

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

[code]

<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 -->
[/code]

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

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

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

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted

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

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

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

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

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

Share this post


Link to post
Share on other sites
  • 0

Posted

Put this somewhere in the document, along with the rest of your script:
[code]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;
}

};[/code]

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

Share this post


Link to post
Share on other sites
  • 0

Posted

The Console says

[size=2][color=#ff0000]Uncaught TypeError: Object 1372224 has no method 'split' [/color][url="http://dyno.illingspree.com/js/illigion.js?ver=3.5-beta1-22104"][color=#000000]illigion.js:18[/color][/url][/size]
[size=2][color=#ff0000]Uncaught TypeError: Object 19194 has no method 'split' [/color][url="http://dyno.illingspree.com/js/illigion.js?ver=3.5-beta1-22104"][color=#000000]illigion.js:18[/color][/url][/size]
[size=2][color=#ff0000]Uncaught TypeError: Object 5789858 has no method 'split' [/color][url="http://dyno.illingspree.com/js/illigion.js?ver=3.5-beta1-22104"][color=#000000]illigion.js:18[/color][/url][/size]

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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

[code]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);[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted

"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!




[color=#666600].[/color][color=#000000]html[/color][color=#666600]([/color][color=#000000] [/color][color=#000088]new[/color][color=#000000] [/color][color=#660066]TimeFormatter[/color][color=#666600]([/color][color=#000000] data[/color][color=#666600].[/color][color=#000000]data[/color][color=#666600].[/color][color=#000000]viewCount [/color][color=#666600]).[/color][color=#000000]in_seconds[/color][color=#666600]()[/color][color=#000000] [/color][color=#666600]);[/color]

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

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

Share this post


Link to post
Share on other sites
  • 0

Posted

Haha, still no bueno. :p

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

[code]

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

[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted

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

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Heartripper' timestamp='1349882559' post='595238149']
Sorry but you want to convert 210 to 3:30 or the other way around?
[/quote]

210 to 3:30

Check out the API data and find "duration"

[url="http://gdata.youtube.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc"]http://gdata.youtube.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='MrXXIV' timestamp='1349882651' post='595238155']


210 to 3:30

Check out the API data and find "duration"

[url="http://gdata.youtube.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc"]http://gdata.youtube.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc[/url]
[/quote]

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

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Heartripper' timestamp='1349882887' post='595238173']
Ok i van write you the code but atm i'm on my Phone :-(
[/quote]

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.

[url="http://illingspree.com/music/hip-hop/2012/08/aap-rockys-purple-kisses-music-video/"]http://illingspree.c...es-music-video/[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='JoeC' timestamp='1349884196' post='595238235']
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.
[/quote]

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='MrXXIV' timestamp='1349884483' post='595238247']


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.
[/quote]

here it is:

[code]function formatDuration(duration){
//We only accept numbers
if(typeof duration != "number"){
return;
}

var pad = function(n){return n &lt; 10 ? "0" + n : "" + n},
timeComponents = [], multiplier = 3600;

//Compute the value of each component (hours, minute, seconds)
for(; multiplier != 0; multiplier = parseInt(multiplier / 60)){
var component = parseInt(duration / multiplier);
duration %= multiplier;

//If hours equal to 0, do not add them.
if(multiplier == 3600 &amp;&amp; component == 0){
continue;
}

timeComponents.push(component);
}

//Pad each component (2 -&gt; 02)
for(var i = 0; i &lt; timeComponents.length; i++){
var padded = pad(timeComponents[i]);
timeComponents[i] = padded;
}

return timeComponents.join(":");
}[/code]

tell me if you want some tweaks. It converts seconds to hours:minutes:seconds format, e.g. 51823 -> 14:23:43

Share this post


Link to post
Share on other sites
  • 0

Posted

PHP version
[code]<?php

function formatDuration($duration){
$duration = intval($duration);
if(!$duration) return;

$result = array();
if($duration >= 3600) {
// Hours
$result[] = str_pad(floor($duration / 3600),2,"0",STR_PAD_LEFT);
$duration = $duration % 3600;
}
$result[] = str_pad(floor($duration / 60),2,"0",STR_PAD_LEFT);
$result[] = str_pad($duration % 60,2,"0",STR_PAD_LEFT);

return implode($result, ':');
}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Tjcool007' timestamp='1349989999' post='595241063']
PHP version
[code]<?php

function formatDuration($duration){
$duration = intval($duration);
if(!$duration) return;

$result = array();
if($duration >= 3600) {
// Hours
$result[] = str_pad(floor($duration / 3600),2,"0",STR_PAD_LEFT);
$duration = $duration % 3600;
}
$result[] = str_pad(floor($duration / 60),2,"0",STR_PAD_LEFT);
$result[] = str_pad($duration % 60,2,"0",STR_PAD_LEFT);

return implode($result, ':');
}[/code]
[/quote]

Won't that only work if I had a PHP version of the jQuery JSON function?

Share this post


Link to post
Share on other sites
  • 0

Posted

Yeah, I just saw PHP in the title xD
If you request the data through jQuery then yeah the PHP code will of course not work.

Share this post


Link to post
Share on other sites
  • 0

Posted

Haha, I try to have more than 10 of my JSON's in jQuery so loading would be more efficient.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.