CODEWITHSUNDEEP
javascriptyoutube-api
Laurent
Laurent

Reputation: 131

Youtube API seekTo() in hh:mm:ss format

I use seekto based on youtube api to create a link to a video of the moment but use of seconds, I would like to use instead hours minutes seconds (HHMMSS). This is certainly possible with a little javascript ?

My code : https://jsfiddle.net/94150148/1pfat4wu/

<iframe id="player" type="text/html" width="500" height="400"
 src="https://www.youtube.com/embed/Zou31ZBBhTY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<p><a href="javascript:void(0);" onClick="player.seekTo(60)">Click here</a></p>
<p><a href="javascript:void(0);" onClick="player.seekTo(120)">Click here</a></p>

<script>
var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player');
    }
</script>

Thanks

Upvotes: 0

Views: 616

Answers (2)

Ethanoid
Ethanoid

Reputation: 99

Use this if the timecode format can be any of DD:HH:MM:SS, HH:MM:SS, MM:SS, or SS.

var duration = '3:23:59:59'; // 4 days minus 1 second

var a = duration.split(':');
var mul = new Array(1, 60, 3600, 86400);

var seconds = 0;

for (var x = 0; x < a.length; x++)
{
    seconds += (a[a.length - 1 - x] * mul[x]);
}

Upvotes: 1

Pedro Lobito
Pedro Lobito

Reputation: 98921

I'm not sure if the Youtupe API support seeking by HH:MM:SS, but you can certainly convert HH:MM:SS to Seconds, i.e.:

HTML:

<iframe id="player" type="text/html" width="500" height="400" src="https://www.youtube.com/embed/Zou31ZBBhTY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<p><a href="javascript:void(0);" onClick="player.seekTo(convertMToS('01:12:26'))">01:12:26</a></p>
<p><a href="javascript:void(0);" onClick="player.seekTo(convertMToS('00:55:55'))">00:55:55</a></p>

JS:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player');
}

function convertMToS(hms){
// your input string
var a = hms.split(':'); // split it at the colons
// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 
console.log(seconds);
return seconds;
}

DEMO: https://jsfiddle.net/1pfat4wu/9/

Upvotes: 1

Related Questions