• 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

    • Last chance to claim VideoProc Converter AI v7.5 ($78.90 Value) for free by Steven Parker Claim your free license (worth $78.90) today, before the offer expires today, June 18. Equipped with AI tools for video and image enhancement, smoothness, and stabilization. Remaster low-quality videos and photos, convert, edit, compress, download, and record with GPU acceleration! Key Features of VideoProc Converter AI V7.5: AI Video Upscaling: Upscale low-res, old, grainy videos/DVDs/recordings by 400% to HD/4K for stunning visuals on larger screens. AI Image Enhancement: Upscale images and AI art to 8K/10K for better cropping, editing, printing, and sharing. AI Stabilization: Intelligently stabilize shaky GoPro/drone/camera footage with controllable cropping ratios. AI Frame Interpolation: Boost FPS from 30/60 to silky-smooth 120/240/480, or create epic slow-motion effects. 5-in-1 Video Toolkit: Convert, edit, compress, download, and record with the highest possible quality. GPU Acceleration: Expedite video processing, even on older computers. How to get it Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last! Download VideoProc Converter AI V7.5 ($78.90 Value, now FREE) Offered by Digiarty, view other free resources The below offers are also available for free in exchange for your (work) email: Continuous Testing, Quality, Security, and Feedback ($27.99 Value) FREE – Expires 6/18 VideoProc Converter AI v7.5 for FREE (worth $78.90) – Expires 6/18 Macxvideo AI ($39.95 Value) Free for a Limited Time – Expires 6/22 Microsoft 365 Copilot At Work ($60 Value) FREE – Expires 6/25 Natural Language Processing with Python ($39.99 Value) FREE – Expires 6/25 Excel Quick and Easy ($12 Value) FREE – Expires 6/24 The Inclusion Equation: Leveraging Data & AI ($21 Value) FREE – Expires 6/24 The Ultimate Linux Newbie Guide – Featured Free content Python Notes for Professionals – Featured Free content Learn Linux in 5 Days – Featured Free content Quick Reference Guide for Cybersecurity – Featured Free content We post these because we earn commission on each lead so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin The above deal not doing it for you, but still want to help? Check out the links below. Check out our partner software in the Neowin Store Buy a T-shirt at Neowin's Threadsquad Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: An account at Neowin Deals is required to participate in any deals powered by our affiliate, StackCommerce. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through the branded deals site.
    • They pulled this same crap with Google Workspace. "hey you get AI now so we are raising your prices". I disabled it for my org but we still have to pay. F this stupid 1984 tiny hat spy crap.
    • Samsung could unveil its Galaxy XR headset ‘Project Moohan' in September by Sagar Naresh Bhavsar Next month, Samsung is expected to unveil the Galaxy Z Fold7, the Galaxy Z Flip7, and an affordable Galaxy Z Flip7 FE, along with the Galaxy Watch8 series. However, the launches don't end there. A fresh report out of South Korea hints that Samsung could launch its much-awaited Galaxy XR augmented reality headset in September. The company has codenamed its first XR headset as "Project Moohan," which translates to "Project Infinite." Samsung has already showcased the Galaxy XR headset a few times in the past. In fact, popular tech YouTuber Marques Brownlee - also known as MKBHD -, got his hands on the Galaxy XR and revealed interesting details about the upcoming device. The Galaxy XR is rumored to come with a sharper display compared to the Apple Vision Pro and run on Google's new operating system for AR and VR headsets, the Android XR. Fast forward to now, Korean publication Newspim reports that Samsung is ready to launch the Galaxy XR headset on September 29 in its home country. Notably, the headset will be unveiled at an Unpacked event and later will go on sale on October 13. Globally, the Galaxy XR headset is expected to launch soon afterwards, though any specific date isn't mentioned. Additionally, the report suggests that fans can expect more teaser videos and prototypes of the headset at the upcoming Unpacked event for the Galaxy Z Fold7 and Flip7. The report also spills some details about the specifications of the Galaxy XR headset. Under the hood, it could run on Qualcomm's new XR2+ Gen 2 chip, made using Samsung's 4nm process. Samsung is also expected to introduce tight integration with its Galaxy ecosystem to offer a connected experience. It will be interesting to see how Samsung holds up against the likes of Meta, which already dominates the XR market, while Apple struggles with high Vision Pro prices.
    • I've put it behind a login for the time being.  I had something like 600,000 requests from just from Alibaba IP addresses that didn't clarify they were bots or scrapers, and so not easy to block using user agent filtering.  I didn't have any issues with bandwidth or accessibility, but that's 600,000 requests just from one cloud provider made to my spinning rust hard drives, that I have to personally pay for when they die, by bots being ran by corrupt mega corporations ignoring my polite requests that they not scrape me and that the information only be accessed by real humans. If any of y'all here were actually using my Kiwix mirror, I have no issue whatsoever creating a username and password for you, just hit me up using one of the methods listed on my personal site and I'll make one for you. https://marcusadams.me
    • I always turn encryption off 1st boot, crazy its on by default on new computers, it should ASK you ON or OFF on 1st boot,, So many people dont even know its on , then forget their windows login and microsoft account,, RETarDED Microsoft is now, , i also find having it on slows things down too
  • 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
      672
    2. 2
      ATLien_0
      288
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      143
  • Tell a friend

    Love Neowin? Tell a friend!