i have looked through everything online and only see answers from a couple of years ago, and none of them help me. i see onYouTubeIframeAPIReady fire, but i never see onPlayerStateChange or onPlayerReady fire when the video plays or ends.
<iframe id="ytvideoframe1" width="100%" height="auto" src="https://www.youtube.com/embed/ZHqBp9vbO5E?enablejsapi=1&origin=http://www.earluminator.com"frameborder="0" allowfullscreen ></iframe>
<script>
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() {
console.log("onYouTubeIframeAPIReady");
player = new YT.Player('ytvideoframe1', {
playerVars: { 'controls': 0, 'modestbranding': 1, 'showinfo': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
console.log("player1 created - onYouTubeIframeAPIReady");
}
function onPlayerReady(event) {
console.log("onPlayerReady");
player = new YT.Player('ytvideoframe1', {
playerVars: { 'controls': 0, 'modestbranding': 1, 'showinfo': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
console.log("onPlayerStateChange");
if ((event.data == YT.PlayerState.PLAYING ) ) {
console.log("PLAYING");
}
if ((event.data == YT.PlayerState.PAUSED ) ) {
console.log("PAUSED");
}
else {
console.log("OTHER");
}
}
Your onPlayerReady is not firing because as opposed to the suggested implementation here, your onPlayerReady is calling itself with the onReady event. Seems like you copied over the onYouTubeIframeAPIReady() code and forgot to make changes. As mentioned in the documentation linked above, I would suggest to change your onPlayerReady implementation as shown
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
Consequently, your onPlayerStateChange is not firing because according to your code, it is not getting there. Fixing your onPlayerReady should fix this problem as well.
Related
I'm trying to create a page that
Selects a random video (from an array of IDs - I have the IDs and can select them)
Plays that video
Plays another random video (grabbing another ID
The part that I'm stuck on is passing a different ID to an already-existing youtube player.
So when I have something like this:
<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', {
height: '390',
width: '640',
videoId: 'zmr2I8caF0c',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
event.target.playVideo();
//how do I pass a new ID here ^
}
}
How would I pass a new ID to event.target.playVideo()? Can I create a function that takes an ID as a parameter and pass it somehow?
Figured it out.
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
var videos = [
'3H3odKtfrTo',
'BxjMGiN0jJY',
'iGC9n0NAvDU'
]
var index=Math.floor(Math.random() * videos.length);
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '9yT7KcHCrRY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
function playNewVideo(id){
player.loadVideoById(videos[index]);
event.target.playVideo();
playNewVideo(randomID)
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
//generate new random number
index=Math.floor(Math.random() * videos.length);
playNewVideo();
}
}
</script>
Hi I am trying to track/detect the youtube player finish video so i can redirect page into a new url. i found code somewhere but problem is that its not working in IE, have a look into my code
http://jsfiddle.net/yhb9yf21/
<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', {
height: '390',
width: '640',
videoId: '7oGgzGPK1SY',
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>
its not working with IE???
I have a youtube video that starts running without controls as I specified when creating the object.
I want to show the controls when the video ended, how to do that?
Here is my code:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'cZ5zFdViWlE',
playerVars : {
'controls' :0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
//code to show controls should be here
}
}
This question already has answers here:
YouTube iframe player API - OnStateChange not firing
(2 answers)
Closed 9 years ago.
Until around 6pm EST this code below would have worked fine, but now for some reason onStateChange is not firing. I've tried on multiple browsers and have had friends check it. See anything obviously wrong?
<div id="video">
<div id="player_wrap">
<div id="player"></div>
</div>
</div>
<script>
var tag = document.createElement("script");
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player("player", {
width: 640,
height: 400,
videoId: "MbfsFR0s-_A",
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
alert ("player ready");
}
function onPlayerStateChange(event) {
alert ("something happened");
}
This is a temporary issue with the iFrame Player API. You can read about it here: https://code.google.com/p/gdata-issues/issues/detail?id=4706
Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/
Basically, you just need to add the event listener within the onReady event (just a temporary fix):
function onReady() {
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
}
The solution posted here works fine and is REALLY clean:
player = new YT.Player(element,{
events: {
onReady: function(){
/*
Do your stuff
*/
// Attach a void function to the event
player.addEventListener('onStateChange',function(){});
},
onStateChange: function(){
// Actual function that gets executed during the event
}
}
});
I have a jCarousel (jquery) running for several youtube videos. The carousel works great, and even pauses when you hover on a slide- but it will resume if you move your cursor off the slide, even if the video is playing.
Videos are embedded using the YouTube Player API.
Plugin: http://sorgalla.com/jcarousel/
This is the Carousel code I'm using:
<script type="text/javascript">
function mycarousel_initCallback(carousel, item, idx, state){
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
$('#mycarousel').hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(function() {
$('#mycarousel').jcarousel({
auto: 2,
wrap: 'both',
initCallback: mycarousel_initCallback
});
});
</script>
The YouTube script:
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '505', // 535
width: '900',
videoId: 'DxZve0UV6UM',
playerVars: {
'autoplay': 0,
'controls': 0,
'modestbranding': 1,
'wmode': 'opaque'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.setPlaybackQuality('hd720');
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
And the HTML...
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<div id="player"></div>
</li>
<li>
<div id="player"></div>
</li>
</ul>
Any suggestions?
Simply call carousel.startAuto() and carousel.stopAuto() when the player triggers an event:
function onPlayerStateChange(evt) {
if(evt.data == YT.PlayerState.PLAYING) {
global_carousel.stopAuto(); // Stop the carousel, if video is playing
} else {
global_carousel.startAuto(); // Otherwise, start it
}
}
Edit:
Make the variable carousel global inside mycarousel_initCallback:
var global_carousel;
function mycarousel_initCallback(carousel, item, idx, state) {
global_carousel = carousel;
//Other code
Then use that instead in the code before (as I've edited).