• 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

    • The Xbox game bar says hi. It's been able to show you CPU, RAM, GPU and FPS for as long as I can remember.
    • WinSCP 6.5.2 by Razvan Serea  WinSCP is an open source free SFTP client, FTP client, WebDAV client and SCP client for Windows. Its main function is file transfer between a local and a remote computer. Beyond this, WinSCP offers scripting and basic file manager functionality. WinSCP features: Graphical user interface Translated into several languages Integration with Windows (drag&drop, URL, shortcut icons) U3 support All common operations with files Support for SFTP and SCP protocols over SSH-1 and SSH-2 and plain old FTP protocol Batch file scripting and command-line interface Directory synchronization in several semi or fully automatic ways Integrated text editor Support for SSH password, keyboard-interactive, public key and Kerberos (GSS) authentication Integrates with Pageant (PuTTY authentication agent) for full support of public key authentication with SSH Explorer and Commander interfaces Optionally stores session information Optionally supports portable operation using a configuration file in place of registry entries, suitable for operation from removable media WinSCP 6.5.2 changelog: Thumbnail view in file panels. Three selectable sizes of toolbar icons, showing slightly larger size by default. Switching to Segoe UI font with slightly larger size. Improvements to Synchronization checklist window, including resolving file moves and pushing synchronization to background queue. Ongoing local delete operation can be moved to a background queue. Optimized working with large local directories. Compatibility with new OneDrive WebDAV interface. Dark theme for session tabs. Improvements to S3 support, including more options to authentication and display and modification of S3 file/object tags. List of all changes. Download: WinSCP 6.5.2 | 11.6 MB (Open Source) Download: WinSCP MSI | 28.7 MB Download: Standalone Executable | 8.4 MB Link: WinSCP Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • QOwnNotes 25.6.2 by Razvan Serea QOwnNotes is a open source (GPL) plain-text file notepad with markdown support and todo list manager for GNU/Linux, Mac OS X and Windows, that (optionally) works together with the notes application of ownCloud (or Nextcloud). So you are able to write down your thoughts with QOwnNotes and edit or search for them later from your mobile device (like with CloudNotes) or the ownCloud web-service. The notes are stored as plain text files and you can sync them with your ownCloud sync client. Of course other software, like Dropbox, Syncthing, Seafile or BitTorrent Sync can be used too. Features: the notes folder can be freely chosen (multiple note folders can be used) sub-string searching of notes is possible and search results are highlighted in the notes application can be operated with customizable keyboard shortcuts external changes of note files are watched (notes or note list are reloaded) older versions of your notes can be restored from your ownCloud server trashed notes can be restored from your ownCloud server differences between current note and externally changed note are showed in a dialog markdown highlighting of notes and a markdown preview mode notes are getting their name from the first line of the note text (just like in the ownCloud notes web-application) and the note text files are automatically renamed, if the the first line changes compatible with the notes web-application of ownCloud and mobile ownCloud notes applications compatible with ownCloud's selective sync feature by supporting an unlimited amount of note folders with the ability to choose the respective folder on your server manage your ownCloud todo lists (ownCloud tasks or Tasks Plus / Calendar Plus) or use an other CalDAV server to sync your tasks to encryption of notes (AES-256 is built in or you can use custom encryption methods like Keybase.io (encryption-keybase.qml) or PGP (encryption-pgp.qml)) dark mode theme support theming support for the markdown syntax highlighting all panels can be placed wherever you want, they can even float or stack (fully dockable) support for freedesktop theme icons, you can use QOwnNotes with your native desktop icons and with your favorite dark desktop theme support for hierarchical note tagging and note subfolders support for sharing notes on your ownCloud server portable mode for carrying QOwnNotes around on USB sticks Evernote import QOwnNotes is available in many different languages like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish Changes in QOwnNotes 25.6.2: The Find action dialog is now working again (for #3294) Added more French translation (thank you, jd-develop) Download: QOwnNotes 25.6.2 | 37.3 MB (Open Source) Download: QOwnNotes for Other Operating Systems View: QOwnNotes Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • So it’s fine he scams people to troll others? 🙄 This is a repeat of his watch fiasco.
  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      700
    2. 2
      ATLien_0
      279
    3. 3
      Michael Scrip
      209
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      130
  • Tell a friend

    Love Neowin? Tell a friend!