CODEWITHSUNDEEP
phpjavascriptyoutubeyoutube-api
Chris Voth
Chris Voth

Reputation: 853

YouTube iFrame API .seekTo() not a method?

I know that .seekTo() works in the Javascript API, but I'm not able to get it working with the iFrame API. Is this method supported? The code below successfully embeds the video and successfully console.log-s the player object. I get the error "player.seekTo is not a function" in the console.

    <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'u1zgFlCw8Aw'
            });
        }
        $(window).load(function(){
            jQuery('#test').click(function(){
                //console.log('test');
                console.log(player);
                player.seekTo(25);
                return false;
            });
        });
    </script>
    <a href="#" id="test">Test</a>

Any ideas? Thanks!

Upvotes: 8

Views: 11693

Answers (4)

Simon_Weaver
Simon_Weaver

Reputation: 145980

Here's an updated jsfiddle using the new iframe api that works

FYI: If you're just using an iframe pure HTML embed you can put ?start=30 for the start time

<iframe width="640" height="390" 
        src="//www.youtube.com/embed/p2H5YVfZVFw?start=30" 
        frameborder="0" allowfullscreen></iframe>

For the API you can start a video at a certain time like this. Use the start parameter

function onYouTubePlayerAPIReady() {
     player = new YT.Player('player', {
       height: '390',
       width: '640',
       videoId: 'p2H5YVfZVFw',
         playerVars: { 'start': 159, 'autoplay': 1, 'controls': 1 },
       events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange,
       }

     });

You can only call seekTo after the player has started playing or it doesn't do anything. Check the playerStateChange callback :

onStateChange': onPlayerStateChange

Add this callback function

function onPlayerStateChange(evt) 
{       
    if (evt.data==1) 
    {
        // this will seek to a certain point when video starts
        // but you're better off using 'start' parameter
        // player.seekTo(22);   
    }
}

The jsFiddle has buttons at the bottom to seek to 30, 60, 90 seconds. It has been tested with all browsers that rhyme with 'rome'. When it opens it puts up an alert box for the player.seekTo function type. If this shows 'undefined' you have a problem.

Upvotes: 6

stewe
stewe

Reputation: 42642

The seekTo() method is only available after the onReady event.

Here is an example that starts playing at 100s:

http://jsfiddle.net/9RQK3/

Upvotes: 1

Rob W
Rob W

Reputation: 349042

This works as intended: http://jsfiddle.net/JbwY4/ (FF 11, Chrome 17).

Make sure that the following conditions are satisfied:

  1. A container with ID player is defined: <div id="player"></div>.
  2. The code is not deferred. Ie, not within an onload event, $(document).ready, setTimeout, etc. Otherwise, the IFrame API fails to load, and the code will not work.
  3. jQuery is loaded.

Upvotes: 3

encodes
encodes

Reputation: 751

i belive not all of the javascript methods have been implimented yet on the iframe api as its experimental so i'd guess not if you tried it and it failed. However i haven't used the iframe api in detail.

Upvotes: 0

Related Questions