Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 502
Chris Voth Avatar asked Mar 21 '12 22:03

Chris Voth


1 Answers

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.

like image 175
Simon_Weaver Avatar answered Sep 28 '22 22:09

Simon_Weaver