How to Detect When a Youtube Video Finishes Playing

How to detect when a youtube video finishes playing?

This can be done through the youtube player API:

http://jsfiddle.net/7Gznb/

Working example:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

Detecting when a YouTube video has finished playing

You could use MediaPlayer. It has an isPlaying method to check if music/videos are currently playing. Just set a Boolean to true while it's playing and check the isPlaying method against that Boolean to see if it changed from True to False.

Otherwise Youtube (or google) may have some specific API's

EDIT:

I looked into here; and it appears that there is an API for youtube.

you can use the method PlayerStateChangeListener for the YoutubePlayerclass to get the listener and implement the method OnVideoEnded

How can I detect that YouTube has finished video playback from injected script (using chrome extension)?

Use ended DOM event on the video element:

var videoElement = document.querySelector('video');
videoElement.addEventListener('ended', function(event) {
  console.log(event);
});

Note, Youtube site uses AJAX navigation, which means your extension's content script runs only one time when the site is opened in any given tab. Add a listener for yt-navigate-finish to detect such navigation:

document.addEventListener('yt-navigate-finish', function(event) {
  var videoElement = document.querySelector('video');
  videoElement.addEventListener('ended', function(event) {
    console.log(event);
  });
});

Use devtools to see more events used by the page:

in Chrome: open Elements inspector and switch to the "Event listeners" subpanel

or type getEventListeners(document) in the console (also works with window and any DOM element)
in Firefox: open Inspector and click the ev or event bubble to the right of <html> and other tags

Can Javascript detect when an embedded Youtube video has ended?

Here's what you're looking for:

http://jsfiddle.net/7Gznb/

// when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            alert('done');
          //do something here

        }

That's the Youtube API by the way

Event when YouTube video finished

Youtube has a JavaScript API: https://developers.google.com/youtube/js_api_reference

What you need is the onStateChange event, which will give you 0 when ended.

player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // the video is end, do something here.
    }
});

Detecting when a youtube video finishes in Android

You can get a callback when video has completed if you are using the youtube API.
So by ovveriding the following you can implement your code,

@Override
    public void onVideoEnded() {
        //Put your code here
    }

Detecting when a youtube video finishes

I have the solution just in case helps someone. I only have to create the new YT.Player when I want the dialog to appear.

j$(document).ready(function(){
    var Bnr_vars = [
        {
            "banner" : "teamworkRowersDLVidOpener",
            "closer" : "teamworkRowersDLVidCloser",
            "dialog" : "teamworkRowersDLVidDialog",
            "auto"   : "false"              // auto open TRUE or FALSE?
        }
    ];

    lightboxCreate(Bnr_vars); // create lightboxes based on array above 

    j$('#' + Bnr_vars[0].banner).click(function(){

        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
        {
            var info=new YT.Player('player', {
                height: '338',
                width: '600',
                videoId: '_Zmr0cUeNBY',
                playerVars : {
                    playerapiid:'player1',
                    rel: '0',
                    wmode: 'transparent',
                    modestbranding: '1'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
            j$('#player').html(info);
        }

    });

How to Detect When a Youtube Video Finishes Playing