• 0

Convert Video Duration Number to Time with PHP or jQuery


Question

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-&gt;ID,'video',true)); ?&gt; ?v=2&amp;alt=jsonc',function(data,status,xhr){
$("#yt_time-&lt;?php echo get_the_ID(); ?&gt;").html(data.data.duration);
$("#yt_views-&lt;?php echo get_the_ID(); ?&gt;").html(data.data.viewCount);
});
});
&lt;/script&gt;
&lt;span&gt;&lt;div class="yt"&gt;Duration: &lt;/div&gt;&lt;div id="yt_time-&lt;?php echo get_the_ID(); ?&gt;" class="yt"&gt;&lt;/div&gt;&lt;div class="yt"&gt; | &lt;/div&gt;&lt;div class="yt"&gt;Views: &lt;/div&gt;&lt;div id="yt_views-&lt;?php echo get_the_ID(); ?&gt;"class="yt"&gt;&lt;/div&gt;&lt;/span&gt;
&lt;/a&gt;
				&lt;/li&gt;
			&lt;?php endwhile;wp_reset_postdata();?&gt;
	&lt;/ul&gt;&lt;!-- #related-videos --&gt;
&lt;/div&gt;&lt;!-- #sidebar --&gt;

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

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

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

post-388684-0-44370700-1349869128_thumb.

19 answers to this question

Recommended Posts

  • 0

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

  • 0

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-&lt;?php echo get_the_ID(); ?&gt;").html(data.data.viewCount);

  • 0

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-&lt;?php echo get_the_ID(); ?&gt;").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-&lt;?php echo get_the_ID(); ?&gt;").html( video_duration.in_seconds() );

  • 0

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.

  • 0

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('dataa ' + typeof data); data.data &amp;&amp; console.log('data.dataa ' + typeof data.data); data.data.viewCount &amp;&amp; console.log('data.data.viewCounta ' + typeof data.data.viewCount + ', and its value is: ' + data.data.viewCount);

  • 0

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

  • 0

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-&lt;?php echo get_the_ID(); ?&gt;").html( new TimeFormatter( data.data.duration ).in_seconds() );

or

var video_duration = new TimeFormatter( data.data.duration );
$("#yt_time-&lt;?php echo get_the_ID(); ?&gt;").html( video_duration.in_seconds() );

  • 0

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




&lt;div id="yt_time"&gt;&lt;/div&gt;
&lt;div id="yt_views"&gt;&lt;/div&gt;

  • 0
  On 10/10/2012 at 15:22, Heartripper 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.com/feeds/api/videos/bCQKlK7WhTM?v=2&alt=jsonc

  • 0
  On 10/10/2012 at 15:24, MrXXIV said:

210 to 3:30

Check out the API data and find "duration"

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

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

  • 0
  On 10/10/2012 at 15:28, Heartripper 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! :D Everything's locked out but that page since I have it all in re-development.

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

  • 0
  On 10/10/2012 at 15:49, JoeC 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.

  • 0
  On 10/10/2012 at 15:54, MrXXIV said:

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.

here it is:

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

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

  • 0

PHP version

&lt;?php

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

	$result = array();
	if($duration &gt;= 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, ':');
}

  • 0
  On 11/10/2012 at 21:13, Tjcool007 said:

PHP version

&lt;?php

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

	$result = array();
	if($duration &gt;= 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, ':');
}

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Hello Could you be kind too help me fix this 3.1gig and not 256gig it says 3.1gig only .someone told me to fix it with this https://www.disk-partition.com/articles/64gb-flash-drive-only-showing-32gb-5740i.html yes my sandisk ultra usb 3.0 256gb wont show up in full .  but i don't know want options i have to use on there can someone  please guide me with step by step instructions please  guide me with step by step instructions on how to repair this .sorry for asking but I've tried but i don't know want i have to do on that programme please help me i am on windows 11 home thank you nick
    • AI is as big a scam as FTX was...run by the same 'group' of people as well.
    • Slack Business+ plan jumps to $15/month as AI features launch by Paul Hill Salesforce has announced a price increase for one of its plans, which will add a few dollars per user each month to organizations' bills. The Slack Business+ plan will see prices rise from $12.50 to $15 per user per month if you pay for a whole year up front; if you pay monthly, the bill will increase from $15 to $18. Salesforce has kept the prices of its Pro plan the same and introduced a new Enterprise+ plan with custom prices for larger organizations. The new price adjustments will take effect on August 17 if you’re planning to renew, and immediately for any new customers. So, if you are renewing before August 17, you will be able to delay this price rise for around a year. The company isn’t just pulling a fast one on customers with these price rises. It’s adding AI to all paid plans, so if you use these features, the increase somewhat justifies them. We saw a similar tactic from Google Workspace back in January. New AI features and deeper Salesforce integration Slack has outlined all the new AI features coming to its Pro, Business+, and Enterprise+ plans starting from July 17. The Pro Plan will have access to conversation and thread summaries, plus huddle notes, while Business+ will have all of those plus: AI Search, Recaps, Translations, File summaries, Workflow generation, and Summarize channels workflow step. The Enterprise+ subscription has all those AI features plus Enterprise search. Additionally, it provides enhanced security, admin controls, governance, and compliance. The company also announced that all plans, including the free plan, will get access to Salesforce Channels, which lets you use Slack and Salesforce together directly within their Customer 360 Apps. Who benefits? By embedding AI right within Slack, organizations should be able to boost efficiency more easily in their daily operations. To ensure that it keeps up with the competition, the company is investing significant resources into its research and development to deliver new innovations. Affected organizations will need to try to find effective ways to use these AI tools to make the price increase worth it, whether this is speeding up tasks to free workers up for other work or something else. The move definitely doesn’t hurt Slack because it’ll make more money whether you use these AI tools or not.
    • Which illegal products? I am asking for a friend.
    • Not having a backup on Earth and another on the moon and another on Mars is also a redundancy failure. Not having a backup in another galaxy is a redundancy failure
  • Recent Achievements

    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      670
    2. 2
      ATLien_0
      288
    3. 3
      Michael Scrip
      224
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      144
  • Tell a friend

    Love Neowin? Tell a friend!