Is a Youtube buffer finish event possible

Asked 21/7, 2011 at 9:32 Answered 12/8, 2018 at 22:1

Is it possible to detect the finish of a youtube buffering through javascript? Here http://code.google.com/intl/de-DE/apis/youtube/js_api_reference.html are a lot of methods but no one has an event that says "finished with buffering".

Dylandylana answered 21/7, 2011 at 9:32 Comment(0)

var ytplayer;

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    checkBuffer();
}

function checkBuffer(){
    if(ytplayer.getVideoBytesLoaded() == ytplayer.getVideoBytesTotal()){
        alert('Buffer Complete!');
    }else{
        var t = setTimeout(function(){
            Editor.split();
        },1000);
    }
}

Dozier answered 25/4, 2013 at 18:14 Comment(2)

This works when the entire video has completed buffering. I think Bartosz meant how to check if the video had buffered enough for the player to start playing. – Darciedarcy 17/7, 2013 at 16:20

Exactly. He asked for "finish of a youtube buffering". If you need to start something before that just change the "ytplayer.getVideoBytesLoaded() == ytplayer.getVideoBytesTotal()" logic to your needs. – Dozier 14/4, 2015 at 18:41

I know this question is old but the answer may still be helpful to some:

The YouTube video can be in one of 6 states:

-1 – unstarted
0 – ended
1 – playing
2 – paused
3 – buffering
5 – video cued

When this state changes (i.e. when the video stops buffering and enters a 'paused' or a 'played' state), the "onStateChange" event is triggered. So, keep track of the previous state and the new state. When the previous state is 'buffering' and the new state is 'ended', 'playing', or 'paused', then this means that the video finished buffering.

Here is an example:

<html>
<body>
  <div id="player"></div>
  <script>
    var player;
    var lastState;

    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: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }


    function onPlayerStateChange(event) {
        if (lastState == YT.PlayerState.BUFFERING &&
            (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.PAUSED)) {
            alert('Buffering has completed!');
        }
        lastState = event.data;
    }
  </script>
</body>
</html>

Aragon answered 12/8, 2018 at 22:1 Comment(0)

Recommended topics

Hot tags