I have embedded youtube videos on my site. After the embedded video has finished playing I would like to immediately autoplay another youtube video.
How could I do that?
When you initialize your youtube player add the onStateChange Event. Then see what the event was and if it was a PlayerState.Ended then you load the next video. something like this
this.player = new YT.Player('player', {
height: pxHeight,
width: pxWidth,
playerVars: {
'rel': 0,
'controls': 0,
'fs':0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onError
}
});
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
LOG("Youtube Playing");
} else if (event.data == YT.PlayerState.ENDED) {
LOG(">>>Youtube Ended");
this.player.loadVideoById(ID, 0, "default");
} else if (event.data == YT.PlayerState.PAUSED) {
LOG("Youtube Paused");
} else if (event.data == YT.PlayerState.BUFFERING) {
LOG("Youtube Buffering");
} else if (event.data == YT.PlayerState.CUED) {
LOG("Youtube Cued");
}
}
Related
I have been working on the receiver in the google cast sdk. I have mutiple youtube videos and mp4 videos in cloud and i have an app that has these videos. I am able to able to cast the youtube videos but when i click on the mp4 link i cannot get back control to the receiver.
Anybody any help?`
var player;
function onYouTubePlayer(videoId) {
player = new YT.Player('player', {
height: '720',
width: '1280',
videoId: videoId,
playerVars: { autoplay:1, controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3, enablejsapi:1,listType:'playlist',
list: playlist},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': catchError
}
});
}
var done = false;
var playlist;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
} else if (event.data == YT.PlayerState.ENDED) {
event.target.destroy();
location.reload();
}else if(event.data == YT.PlayerState.PAUSED){
location.reload();
}
}
function onPlayerReady(event) {
//if(typeof(SONG.getArtistId()) == undefined)
//{
// console.log("undefineeeed");
//}
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
event.target.playVideo();
}
function catchError(event)
{
if(event.data == 100) console.log("This Video does not exist!!");
}
function stopVideo() {
player.stopVideo();
}
/**
* Called when we receive a LOAD message. Calls load().
*
* #see sampleplayer#load
* #param {cast.receiver.MediaManager.Event} event The load event.
* #private
*/
sampleplayer.CastPlayer.prototype.onLoad_ = function(event) {
this.log_('onLoad_');
this.log_(event.data);
// handler for the CastMessageBus message event
this.messageBus.onMessage = function(event) {
this.log_('Message [' + event.senderId + ']: ' + event.data);
// display the message from the sender
// inform all senders on the CastMessageBus of the incoming message event
// sender message listener will be invoked
this.messageBus.send(event.senderId, event.data);
}
var videoId = event.data.media.contentId.split("?v=")[1];
if(event.data.media.contentId.includes("youtube.com")){
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubePlayerAPIReady = function() {
onYouTubePlayer(videoId);
};
} else {
onYouTubePlayer(videoId);
}
}else{
}
this.cancelDeferredPlay_('new media is loaded');
this.load(new cast.receiver.MediaManager.LoadInfo(
/** #type {!cast.receiver.MediaManager.LoadRequestData} */ (event.data),
event.senderId));
};
`
I am using the YouTube API, and my intention is to, when a user clicks on a video to play it, instead pause or stop the video, and then show a popup asking them to give me their email address. When they do that or close the popup, it would then start the video playing.
This works fine on my desktop. But on the iPhone, Safari opens up the full screen video player thingy... with a paused/stopped video. Closing that by clicking 'Done' brings me back to the website, with the email popup thing visible... and closing that will start the video playing..
But I want to be able to show that popup BEFORE iPhone Safari opens up the blank video player. Any suggestions?
Gary
Edit: My code so far is this:
function set_up_video(){
$.each($('.youtube-player'), function(){
player_id = 'iamavl-video-'+$(this).attr('data-service-id')
player_element = $('#'+player_id);
player = new YT.Player(player_id, {
height: '461',
width: '707',
videoId: $(this).attr('data-service-id'),
events: {
'onReady': onPlayerReady
},
wmode: 'transparent',
playerVars: {
autohide: 1,
autoplay: 0,
cc_load_policy: 0,
color: "red",
controls: 1,
disablekb: 0,
enablejsapi: 1,
fs: 1,
iv_load_policy: 3,
loop: 0,
modestbranding: 0,
rel: 0,
showinfo: 0,
start: 0,
theme: "dark",
version: 3,
wmode: "transparent"
}
});
});
}
function onYouTubeIframeAPIReady() {
set_up_video();
}
function onPlayerReady(event) {
player.addEventListener('onStateChange',onPlayerStateChange);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
//console.log('PLAYING');
player.pauseVideo();
$('#email-collection-modal').addClass('shown-once').modal('show');
}
if (event.data == YT.PlayerState.ENDED) {
//console.log('ENDED');
}
if (event.data == YT.PlayerState.PAUSED) {
//console.log('PAUSED');
}
if (event.data == YT.PlayerState.BUFFERING) {
//console.log('BUFFERING');
}
if (event.data == YT.PlayerState.UNSTARTED) {
//console.log('UNSTARTED');
}
}
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
}
}