We Keep Coding

Detect end of Youtube video inside the Youtube website in Javascript

I want to detect the end of a Youtube video I am watching on the Youtube website with Javascript.
I know they have an API for that, I tried to loaded it in the page with GreaseMonkey, but it doesn't seem to work. Maybe the API is only for embeded videos on other websites?
Here is what I have so far:
if (window.location.href.indexOf("&enablejsapi=1") == -1)
{
window.location = window.location.href + "&enablejsapi=1";
}
var api = document.createElement('script');
api.type = 'text/javascript';
api.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(api);
var onFinish = document.createElement('script');
onFinish.type = 'text/javascript';
var onFinishContent = "function onPlayerStateChange(event) { console.log('test'); if (event.data == YT.PlayerState.ENDED) { console.log('end'); } }"
var textNode = document.createTextNode(onFinishContent);
onFinish.appendChild(textNode);
document.body.appendChild(onFinish);
function onPlayerStateChange(event)
{
console.log("test");
if (event.data == YT.PlayerState.ENDED)
{
console.log("end");
}
}
Like you can see, I tried to make the onPlayerStateChange function callable in two ways, one directly with Greasemonkey, and the second one by injecting a script node. Both of them doesn't work, I never see the "test" message I display in the console.
Does anyone know why I can't seem to be able to load the API?

Sebastian Simon's comment-answer in the year 2015:
document.querySelector("video").addEventListener("ended",
() => alert("Video ended!")});
I checked that this still works in the year 2022.

org.mozilla.javascript.EcmaError: ReferenceError: \"document\" is not defined

I am using google maps to get the coordinates of a location. My code is running exactly how I want it to however when I click save on the form I get the error in the above title.
Can anyone tell me where I am going wrong?
function init(){
//Calls the loadScript and initialize function and loads the Google Maps API
loadScript('//maps.googleapis.com/maps/api/js?APIKEY&callback=initialize');
}
function loadScript(src,callback){
//Adds the google maps script to the head of the HTML
alert('loading');
var script = document.createElement("script");
script.type = "text/javascript";
if(callback)script.onload=callback;
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}

Apparently all I needed was a try catch around the code:
function loadScript(src,callback){
//Adds the google maps script to the head of the HTML
try{
var script = document.createElement("script");
script.type = "text/javascript";
if(callback)script.onload=callback;
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}catch(e){
alert(e);
}
}

Google analytics - track event in firefox plugin

I develop a firefox extension and I want to track events in the extension using Google analytics.
I tried to add the extension and fire an event but it didn't work:
var _gaq = _gaq || [];
var _AnalyticsCode = 'UA-1234567-9';
_gaq.push(['_setAccount', _AnalyticsCode]);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
function googleAnalyticsTrackEvent(category, action) {
_gaq.push(['_trackEvent', category, action]);
}
googleAnalyticsTrackEvent('category','action');
Is there any other way I could track events in my plugin?

You can use this library https://code.google.com/p/google-analytics-js/
Google Analytics to track FireFox extension use

Embed SWF in JavaScript

i want to embed swf into javascript, i know there is a method to do this, but how do i do it? here is my javascript
<script type="text/javascript">
adroll_adv_id = "JD5ZGBNO4RBYVAMMMPX3J7";
adroll_pix_id = "CEJOJM5N5VAHBKCVMT2DML";
(function () {
var oldonload = window.onload;
window.onload = function(){
__adroll_loaded=true;
var scr = document.createElement("script");
var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
scr.setAttribute('async', 'true');
scr.type = "text/javascript";
scr.src = host + "/j/roundtrip.js";
((document.getElementsByTagName('head') || [null])[0] ||
document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
if(oldonload){oldonload()}};
}());
</script>
I have a flash banner actually, and i want to call this javascript into that banner

If you want to call javascript function from flash, then you need to call like this from your flash code,
Externalnterface.call("function_name","arg");
You need to import the library flash.external.ExternalInterface;

Loading external js in IE

I want to load external javascript file but I can't use AJAX requests because of same origin policy, and I have a code:
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test.js';
head.appendChild(script);
</script>
That is ok everywhere (Firefox, Chrome, Opera, IE9, IE6) but not in IE8, IE7. How can I make it work in IE8?

How about the old document.write('<script language="javascript" src="test.js"><\/script>'). Also you do not have to append to head you can use body to.

Try reading up about JsonP :)

I'm not sure why you had problems in IE, but the following worked in Firefox 4, IE6 and IE9 (i.e. the browsers I had available):
<html>
<head>
</head>
<body>
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
head.appendChild(script);
var interval = window.setInterval(function() {
if (typeof($) !== "undefined") {
$("<p>it worked!</p>").appendTo(document.body);
window.clearInterval(interval);
}
}, 100);
</script>
</body>
</html>