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
}
}
Related
I'm having trouble changing Youtube Id. When I clicked the button, I could not Change the ID Value and make it play the other one.
My codes are as below
Html Code
<button data-id="L9YYN3-sdTM" onclick="youTubePlayerChangeVideoId('DrQRS40OKNE');"> Şimdi Müzik Çal</button>
<button data-id="wHGVz5iEY_Q" onclick="youTubePlayerChangeVideoId('wHGVz5iEY_Q');"> Şimdi Müzik Çal</button>
And Js Code
function youTubePlayerChangeVideoId(data) {
var video = data;
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: video,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
var el2 = document.getElementById('playAudio');
setTimeout(function(){ el2.click() }, 1000);
};
When I Click the Button, that Id video starts and the other one stops.
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.
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 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).