We Keep Coding

AfterGlowPlayer after setting dynamically data-youtube-id video won't play

I im using this video player:
http://docs.afterglowplayer.com/docs/playing-a-youtube-video
and after i dynamically add data-youtube-id i im unable to play video..do i need call with another way?
my script of reading glowplayer2 class and appending it to glowplayer3 class that can center glowplayer on the screen (glowplayer2 class is hidden div that contains php generated url)
$(".afterglowplayer2").click(function () {
switch(true) {
case /imdb/.test($("#myvideo video", this).attr("src")):
alert("IMDB!");
$(".afterglowplayer3 #myvideo video").attr("src", $("#myvideo video", this).attr("src"))
break;
default:
alert("YOUTUBE");
$(".afterglowplayer3 #myvideo video").attr("data-youtube-id", $("#myvideo video", this).attr("src")).removeAttr("src");
break;
}
$.afterglowplayer.toggle(".afterglowplayer3");
return false;
});
After that code i get this:
<video class="vjs-tech" id="myvideo_html5_api" data-ratio="0.5625" style="padding-top: 56.25%;" preload="auto" data-youtube-id="XpICoc65uh0"></video>
So you see that correct data-youtube-id is set using above jQuery function but video is not playing...why? If i set it manually in html code it plays normally...but i need to change and remove src if is youtube video and if is not add src attribute to video tag...

You should put their respective class (afterglow) and size
<video class="afterglow vjs-tech" width="960" height="540"...
edit Your code -> is misspelled.
$(".afterglowplayer2").click(function () {
if(/imdb/.test($("#uniqueid", this).attr("src")){
alert("IMDB!");
$("#uniqueid").attr("src", $("#uniqueid", this).attr("src"))
} else {
alert("YOUTUBE");
$("#uniqueid").attr("data-youtube-id", $("#uniqueid", this).attr("src")).removeAttr("src");
}
$.afterglowplayer.toggle(".afterglowplayer3");
return false;
});

How detect in vanilia javascript end of video in tag <OBJECT> html?

I must use tag object type="video/mp4" in my project for hbbtv, and I want detect end of movie in vanilia JS. How can i do it?

document.getElementById('objectId').addEventListener('ended',endCallback,false);
function endCallback(e) {
//Action
}

When using the AVControl object, you have to register the PlayStateChange event and check playState 5 (Finished).
document.getElementById('objectId').onPlayStateChange = function() {
if (document.getElementById('objectId').playState == 5) { // FINISHED }
};
http://www.oipf.tv/docs/OIPF-T1-R2_Specification-Volume-5-Declarative-Application-Environment-v2_3-2014-01-24.pdf
7.14.1 The A/V Control object

Change youtube video on image on stop state

I made the code like this which changes an image on the web-site on Youtube video.
<script type="text/javascript">
$(window).load(function(){
$('img.demovideo').click(function(){
video = '<iframe class="demovideo" width="100%" height="551px" src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
});
$('img.demovideo').css('cursor', 'pointer');
});
</script>
How can I change the Youtube video back on image on player state 0?
I made a code like this, but it doesn't work:
<script type="text/javascript">
raketaplayer.onStateChange () {
b = raketaplayer.getPlayerState();
if (b=0) {
image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer" style="cursor: pointer;">';
$(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});
}
}
</script>
What's wrong with it? Please, help :)
Image code as follows:
<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer">

A couple of issues that you might want to address. First of all, your conditional statement uses a single equal sign instead of a double. More importantly, though, when you execute the onStateChange function, it can take an argument that represents the event, which will report the state change without you having to query for it, like this:
raketaplayer.onStateChange (event) {
if (event.data==0) {
image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer" style="cursor: pointer;">';
$(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});
}
}
Finally, make sure you've bound your onStateChange function to the state change event of the YT.Player object that you create elsewhere in your code.

Image Rollovers with Javascript

I'm doing this for my assignment which is due next week.
Our instructor wanted us to create image rollovers. I already created one but it won't work.
Here's my code:
<script>
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById(lightswitch).src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById(lightswitch).src=buttonImg
}
</script>
and here's the img:
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn()" onMouseOut="turnSwitchOff()" />
The picture on my Website won't change to the one I put in the Javascript code, why is that?

Your Id's need to be in quotes
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById("lightswitch").src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById("lightswitch").src=buttonImg
}

Besides the fix for making sure to call getElementById with a string ("lightswitch"), you could get a little nicer and not even have to lookup the image by id at all if you pass this into the function:
<script>
function turnSwitchOn(img) {
img.src="lab11-1switchon.jpg"
}
function turnSwitchOff(img) {
img.src="lab11-1switchoff.jpg"
}
</script>
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" />

Using jQuery to play/stop YouTube multiple iframe players

I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))
Here is the jsfiddle with what I am talking about: http://jsfiddle.net/iwasrobbed/9Dj8c/3/
So each player starts, but it continues to play even after the div containing it is hidden.
By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.
Code here in case jsfiddle is not available:
<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube.com/player_api');
loadYouTubePlayer = function(playerID) {
the_player = new YT.Player(playerID, {
events: { 'onReady': playYouTubeVideo }
});
};
unloadYouTubePlayer = function(playerID) {
// This is the part that's broken
$(playerID).stopVideo();
};
function playYouTubeVideo(event) {
event.target.playVideo();
}
$('.show_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
loadYouTubePlayer('the_player'+id);
$('.stop_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
$('.stop_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
unloadYouTubePlayer('the_player'+id);
$('.show_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
});
</script>
<div class="hidden_player" data-video-id="0" style="display:none">
<iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
<p>Show video 0 and start playing automatically</p>
<p>Stop video 0 from playing</p>
<br/><br/>
<div class="hidden_player" data-video-id="1" style="display:none">
<iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
<p>Show video 1 and start playing automatically</p>
<p>Stop video 1 from playing</p>
</body>
</html>

I have created a function which access framed YouTube videos through the ID of the parent of the iframe (as specified in the YT Frame API), and executes the functions defined at the JS API.
See this answer for the code and a detailled Q&A section.
My code would be implemented in this way:
callPlayer(playerID, "stopVideo");