Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting current time of embedded iframe youtube player?

Here i have tried as follows:

HTML

<iframe id="player" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/7a_CVFRqYv4?rel=0&amp;enablejsapi=1"></iframe>

Script

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

Here i want to such action like when the player timing reaches 6 seconds,i want to change the src of the iframe.

like image 784
Siva G Avatar asked Jul 09 '14 06:07

Siva G


People also ask

How do I get an iframe embed code from YouTube?

On a computer, go to the YouTube video or playlist that you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.


2 Answers

This thread describes how you can get the current playing time of a video using the YouTube API Getting Current YouTube Video Time

Then maybe use setInterval() to run every second to check the value of getCurrentTime() from the API and if value = 6 set the src to the new video.

like image 140
Jon B Avatar answered Sep 23 '22 12:09

Jon B


this should be solved with setInterval(), not setTimeout().

using the latest youtube iFrame API:

var player;
var checkInt; // save this as a var in this scope so we can clear it later
function onYouTubePlayerAPIReady() {
   player = new YT.Player('player');
   startInterval()
}

function startInterval() {
   //checks every 100ms to see if the video has reached 6s
   checkInt = setInterval(function() {
      if (player.getCurrentTime() > 6) {
         changeSrc();
         clearInterval(checkInt);
      };
   }, 100)
}

function changeSrc() {
   player.loadVideoById(xxxxx);
}
like image 23
Good Idea Avatar answered Sep 23 '22 12:09

Good Idea