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.
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
}
}
So I added the youtube iframe api to my website and followed the instructions; so this is my code:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
controls: '0',
autohide: '1',
videoId: 'I'd rather not display that',
events: {
// 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Setting controls to 0 should not display the player's controls as per this article but it's still showing;
Also setting the autohide to 1 should have the progress bar and controls slide out after a couple of seconds as per this article but that also doesn't work.
Am I doing something wrong?
I got the embed version and the iframe version both autoplaying, autohide (don't really need) and hiding controls. I used the sample code and added in the parameters you needed.
All you need to do is replace your movie id and I think you will be up and running.
Here is the jsfiddle links where you can see it work and grab the code.
Embeded version: http://jsfiddle.net/franktudor/jk9SS/
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="640" height="390"></embed>
</object>
Here is the iFrame version: http://jsfiddle.net/franktudor/2wh8T/
<iframe id="ytplayer"
type="text/html"
width="640"
height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&autohide=1&controls=0"
frameborder="0"/>
Both are options you can use. You are working with the iFrame version...I also recommend that version. But in the event you need another solution the embed version can be used.
Its not that script style but you can use a wrapper if needed.
Here is a link to an HTML5 youtube (and vimeo) video wrapper.
Ok, here is the functional code like your example that I got working: http://jsfiddle.net/franktudor/DU57E/
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 }, //this is what you need...
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Just set the variables inside the propertie 'playerVars'.
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).