CODEWITHSUNDEEP
javascriptyoutubeyoutube-api
khateeb
khateeb

Reputation: 663

Youtube API - SeekTo sometimes doesn't work

I'm trying to let the users seek to specific times at a youtube video using the following function:

    function setCurrentTime(slideNum) {
    var object = <?php echo json_encode($matches); ?>;
    if ('seekTo' in player.trackingVideoId){
        var seekTime = object[0][slideNum];
        player.trackingVideoId.seekTo(HHmmssToSeconds(seekTime));
    }
}

Where 

var object = [["00:00:00","00:01:07"],["00","00"],["00","01"],["00","07"]];

player.trackingVideoId = new YT.Player('trackingVideoId');

<iframe id="trackingVideoId" type="text/html" width="340" height="210" src="https://www.youtube.com/embed/D77wXvwChtU?enablejsapi=1" frameborder="0"></iframe>

<input type="button" value="Seek" onclick="setCurrentTime(1)">

It works fine sometimes and sometimes it doesn't work and the following error appears (on firefox consol) :

TypeError: invalid 'in' operand player.trackingVideoId

if ('seekTo' in player.trackingVideoId){

and when commenting the condition if ('seekTo' in player.trackingVideoId){

The following error appears 

Uncaught TypeError: Cannot read property 'seekTo' of undefined

update:

I initialized it - as in your link - at onYouTubeIframeAPIReady(). However, I put the setCurrentTime(slideNum) outside onYouTubeIframeAPIReady() function, I tried to put it inside, there is another error that setCurrentTime isn't defined.

I'm trying to seek specific time when the user click a button 

<input type="button" value="Seek" onclick="setCurrentTime(0)">

You can try it @ http://ilstream.com/video_slides/video_slides.php

Upvotes: 4

Views: 3330

Answers (1)

t_yamo
t_yamo

Reputation: 779

I think you don't initialize YouTube Player.
YT.Player can instantiable after onYouTubeIframeAPIReady.
(Please use "console.dir(player.trackingVideoId)" for inspection in your console)

I recommend that you implement same way following code.
https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Update:
Please try this code, and compare with your code.
It seems work fine for me (Windows7 / Chrome 37.0.2062.124 m).

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>
    <input type="button" value="Seek0" onclick="setCurrentTime(0)" />
    <input type="button" value="Seek1" onclick="setCurrentTime(1)" />
    <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', {
          height: '210',
          width: '340',
          videoId: 'D77wXvwChtU',
        });
      }
      function setCurrentTime(slideNum) {
        var object = [ 60, 120 ];
        player.seekTo(object[slideNum]);
      }
    </script>
  </body>
</html>

Upvotes: 6

Related Questions