We Keep Coding

__flash__removeCallback is undefined errors in IE9 while removing the dom element

probably the duplicate of '__flash__removeCallback' is undefined when deleting DOM element with Youtube iframe
I went through some sites but could not found the exact solution of why youtube throws this exception while removing the dom element with youtube iframe and what will be the solution??
Some solution that i have got are :
ytplayer.getIframe().src=''; -> I dont know how this could solve my problem?
2.$('#youtube iframe').attr('src', '');
$('#youtube').remove() -> I have tried this but won't worked.
3.hide iframe before remove the parent element -> won't worked.
Please help me to resolve this issue.

This appears to be an IE9-only bug.
It occurs when a Flash object interacts with a HTML document using JavaScript (ExternalInterface on the Flash/ActionScript-side) and rears it's ugly head when an IFRAME containing the HTML document w/ the Flash Object comes into play.
Seeing how you specify you're using the YouTube API, there is sadly nothing you can do to make sure the Flash unregisters itself and won't call JavaScript functions (or vice versa) when it's time to remove it as you rely on third party software running outside your applications domain.
If you don't NEED the YouTube API, but merely a quick way to get a video within your application, the safest bet is to use an old style object embed for IE9 and the API / IFRAME embedding for the rest of the sane world.
<object width="{WIDTH}" height="{HEIGHT}">
<embed src="https://www.youtube.com/v/{VIDEO_ID}?version=3&autoplay=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="{WIDTH}" height="{HEIGHT}"></embed>
</object>
Removing above object (you can use SWFObject's "embedSWF" and "removeSWF" just fine for this btw) will get the video player off your page, without throwing any _flash_remove.. warnings.
If you NEED the YouTube API / control over the video player state:
Have you tried invoking the "destroy"-method on the ytplayer ? Unvoke the destroy and while I'm reluctant to posting "answers" using timeouts, give the Flash object some time to unregister BEFORE your set the source of the iframe to an empty string (so the document unloads), then clear the iframe or it's parent container.
Though I remember from a previous project this drove us mad (the context being a single-page interface where videos were dynamically added and removed) and we resorted to writing our own Flash player fallback using the AS3 YT code. That's how annoying it got.

The below code should work across all browsers (and not produce the IE9/IE10 error you describe above).
function playVideo() {
$('#video iframe').attr('src', 'http://www.youtube.com/embed/VIDEO_ID_HERE');
$('#video iframe').fadeIn();
}
function stopVideo() {
$('#video iframe').attr('src', '');
$('#video').fadeOut();
}
The end result is a video that will load when button is clicked, and will safely remove the video without causing memory leaks in IE9/IE10.

This worked for me in IE9.
$(window).unload(function() {
jwplayer('video1').stop();
jwplayer('video1').remove();
$(window).remove();
});

You can also fix Flash's callback removal function by overwriting it with your own. This issue is not particularly connected to video apps only. In the example below I overwrite it right before the page gets unloaded, but it can happen anytime after the swf loads.
window.onbeforeunload = function () {
this.__flash__removeCallback = function (instance, name) {
if (instance == null) return; // <-- this line prevents the error
instance[name] = null;
}
}

mailto: anchor links unloading html5 video in Chrome

I have a very simple page with a <video> tag and an email anchor link:
http://jsfiddle.net/6GquX/3/
Clicking the email link in Chrome (OS X 10.8 + Win7, 23.0.1271.97) invokes the beforeunloadchange event and causes the video to unload, which isn't the desired outcome.
Curiously enough, if I let the video buffer a bit and then click the email link, the video keeps playing and doesn't unload.
To my knowledge this only occurs in Chrome and I'm truly at a loss. Visiting any HTML5 video player site (videojs, flowplayer etc), starting a HTML5 video and then immediately simulating an email click with document.location.href = "mailto:foo#bar.com" in the dev console yields the same error.
However, I'm inclined to think it's the way in which the video has been encoded as I'm unable to recreate the above with a video downloaded from YouTube's HTML5 player:
http://jsfiddle.net/6GquX/4/ (source)
1. Is it possible that YouTube are encoding their videos in a particular way to combat this?
2. Are there any strategies / hacks I can employ to get around this?
Update:
The issue seems to be linked to the bitrate of the video. Re-encoding that flowplayer example above to 300kbps resolves the issue. (A 400kbps video still exhibits the same issue, not sure what the exact threshold is)
300kbps example here: http://jsfiddle.net/6GquX/7/
Hopefully this will be resolved in a future version of Chrome.

I just encountered the bug you seem to be describing myself.
My workaround was to simply play the video again after someone clicks the mailto link.
$('.email').click(function(e){
e.preventDefault();
document.location.href = $(this).attr('href');
setTimeout(
function(){
// video.js handle (insert whatever call you want to play the video)
_V_.players.video.play();
},
2000
);
});

Deactivate/removing an iframe using javascript

I have more than 15 thumbnail images displayed(fetched from DB and looped) on the webpage. Onclick of an image, I have an overlay which plays the youtube video(iframe version).
The problem is that, on closing the overlay, the youtube video continues to play.
After going through the YT documentation, I figured out that there is no way to control the YTplayer inside an iframe. But, I have to use an iframe because embed and object tags make use of flash and flash is not supported in Mac(Mountain Lion)
So, I was thinking, if there is a way to deactivate iframe then the player may stop. display:none; does not help.
Please suggest.
Thanks in advance.

I tried this method and it works:
I fetch the iframe source by id using javascript and make the source blank.
<script>
function stopVideo(){
document.getElementById("iframeID").src= "";
}
</script>

Chrome extension - listening to YouTube events

var ytplayer = document.getElementById("movie_player");
ytplayer.addEventListener('onStateChange', 'onPlayerChange');
function onPlayerChange(newState) {
alert('do something at least...');
if(newState == 0) {
alert('movie has stopped');
}
}
This is how I try to listen to YouTube events with a Google Chrome extension. It doesn't give me any error at all, even though it should when the movie has finished. Or at least when the state has changed. Does anyone know what is wrong?
Console doesn't give me any errors.

Your code works fine on Firefox because the player is Flash. However Chrome supports HTML5 and the player is HTML5 Video Player. So there is no element which has "movie_player" id. Are you sure your video player is Flash on Chrome. Right click the video and see player info in context menu. More details about YouTube HTML5 Player.
Youtube HTML5 player is currently in trial, so you should detect user's player mode and add a fallback for it at least YT completely use HTML5.

The HTML5 video element fires its own events. Right now, it looks like the easiest way to get at it is by class name (since it doesn’t have an id):
var videoElement = document.getElementsByClassName('video-stream')[0];
Video elements fire a bunch of events, which you can find listed here in the HTML5 spec.
For example:
videoElement.addEventListener('pause', function(){ alert('paused!'); })

HTML5 <video> callbacks?

I'm working on a site for a client and they're insistent on using HTML5's video tag as the delivery method for some of their video content. I currently have it up and running with a little help from http://videojs.com/ to handle the Internet Explorer Flash fallback.
One thing they've asked me to do is, after the videos finish playing (they're all a different length), fade them out and then fade a picture in place of the video --- think of it like a poster frame after the video.
Is this even possible? Can you get the timecode of a currently playing movie via Javascript or some other method? I know Flowplayer (http://flowplayer.org/demos/scripting/grow.html) has an onFinish function, is that the route I should take in lieu of the HTML5 video method? Does the fact that IE users will be getting a Flash player require two separate solutions?
Any input would be greatly appreciated. I'm currently using jQuery on the site, so I'd like to keep the solution in that realm if at all possible. Thanks!

You can view a complete list of events in the spec here.
For example:
$("video").bind("ended", function() {
alert("I'm done!");
});
You can bind to the event on the element like anything else in jQuery...as for your comment question, whatever element you're delivering for IE, yes, it would need a separate handler rigged up to whatever event it provides.
For the other question about timecode, the timeupdate event occurs when it's playing, and the durationchange event occurs when the overall duration changes. You can bind to and use them just like I showed with the ended event above. With timeupdate you'll probably want the currentTime property, with durationchange you'll want the duration property, each of which you get directly off the DOM object, like this:
$("video").bind("durationchange", function() {
alert("Current duration is: " + this.duration);
});

There is an OnEnded event associated with the video tag. However, it does not work for me in the current version of Google Chrome.
HTML 5 Video OnEnded Event not Firing
and see also
Detect when an HTML5 video finishes
For a general-purpose solution (supports video tag with fallback see)
http://camendesign.com/code/video_for_everybody
or
http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library or http://www.mediafront.org/

I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.
<script type="text/javascript">
var video= $('video')[0];
var videoJ= $('video');
videoJ.on('ended',function(){
video.load();
video.pause();
});
</script>