I'm trying to randomly play videos in a Youtube playlist. I know that there's a bug in the setShuffle function so I am going to randomly generate a random number and then play that video with the .playVideoAt function.
The problem is that when I execute the .playVideoAt function, it ignores it and just plays the first video. Here's my code to initiate the player (standard stuff):
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars:
{
listType:'playlist',
list: 'PLmHQS8zAl1Bd5elzBYWqucXDK-wv1Xfha'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
And my code for to start the player. For testing, I just set it to video 2 (there are a total of 4).
function onPlayerReady(event) {
player.setLoop(true);
event.target.playVideoAt(2);
}
Is there something about the playVideoAt function I'm missing?
You are directly effected by a bug - playVideoAt() wipes out the playlist.
Steps to reproduce issue:
goto: https://developers.google.com/youtube/youtube_player_demo
content: 'load a playlist' and add a playlist ID
click 'Next' - note that nextVideo(); has no value where it should show value for the next video.
Google forums thread: https://productforums.google.com/forum/#!msg/youtube/buTk8H36mEs/ridlaT-c_YIJ
Related
This wasn't a problem for me until a few months ago. I thought YouTube had changed something in their API for Iframe Embeds, as they often do, but for this particular case, I am not sure.
I use the following code as suggested by the docs but my problem comes when I try to add a custom playlist using selected IDs.
<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: {
'playsinline': 1,
'playlist': '$playlist'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
The iframe loads and plays the videos in some cases but will fail most of the time displaying the message "This video is unavailable".
Forexample, loading a playlist of songs from Imagine Dragon :
fKopy74weus,izhxTx4LVWo,rGlEZpOVjGo,7wtfhZwyrcc,1nv9br7P7g0,dvPfgVGFu6k,1SrEE6zwnW8,LeaydhTew3U,dvuxxVKZ1eQ,It_Ae6XSPzw,f242R8si7qU,z0a9k1gSMsw,trig1MiEo1s,U5x96y4mApI
will not work, but if I load songs from say, Olivia Rodrigo:
hM2U8cb8lhI,6tsu2oeZJgo,ZmDBbnmKpqQ,w-HfMiue7-k,cii6ruuycQA,gNi_6U5Pm_o,AqRXiQkyxvI,ZQFmRXgeR-s,Z-9gQjUZMm0,AyX_LL9nWSE,ZLlsmB1D4Q0
the player will load and play all the videos just fine.
However, If I load a single video from either artist, it will play without any problems.
What could be the issue here?
Thanks.
I am having a very frustrating experience trying to get videos to loop consistently using a basic iframe. I am not interacting with the API via code. I simply have an iframe with autoplay=1,mute=1,loop=1. I've tried using stand-alone videos and I've tried playlists (with list=[ID],listType=playlist) and I keep running into the same problem. Sometimes the player will loop the video and sometimes it will not. Every time I think I have it figured out and I'm ready to deploy the app, I test it again and the video fails to loop.
Windows 10
Chrome 71.0.3578.98
Angular 6.0.3
You can choose any of these options:
Check my answer where I described how you can set your URL for create a playlist (using a single videoId) and simulate a loop.
Use the YouTube iframe Player API for set your video and (once the video ended), call the playVideo() function for play the current video = hence, creating a loop.
This is the code: - unfortunately, you can't see it working here, but, you can see the working jsfiddle1
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Variables of the divs (where the YouTube iframe will load):
var player;
function onYouTubeIframeAPIReady() {
// Div player:
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'xPCZEoGJi_4',
playerVars: {
'autoplay': 1,
'loop': 1,
'mute': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
// When the video ends, it will play again.
// See: https://developers.google.com/youtube/iframe_api_reference?hl=en#Events
if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
}
}
// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="player"></div>
1 If the video (once has loaded) hasn't play, you have to play manually the video - this is due some kind of restrictions that jsfiddle has.
Ive made a pause button for a YouTube video. This worked fine however now I need to clone the video. This is due to how the carousel that im using works and also so the video can be displayed in a Lightbox.
Below is a simplified version of my code. Now the pause button only works on the first video. How can I make a button that will pause all cloned videos?
http://jsfiddle.net/36vr2kjv/2/
<p class="trigger">Trigger</p>
<p class="trigger2">Trigger2</p>
<div class="player-wrap">
<div id="player"></div>
</div>
<div id="player2"></div>
var player;
$(function() {
// 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.
onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
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();
}
$('.trigger').click(function(){
//this works
player.pauseVideo()
});
return player;
});
$(function() {
setTimeout(function(){
$('.player-wrap').clone().appendTo('#player2');
}, 2000);
});
$(function() {
$('.trigger2').click(function(){
// this does not work
player.pauseVideo()
});
});
Actually there is concept of deep cloning and shallow cloning. Shallow cloning does not copy events hence you have to use deep cloning. Where ever you are using clone() instead use clone(true).
For example in above code snippet you can use:
$(function() {
setTimeout(function(){
$('.player-wrap').clone(true).appendTo('#player2');
}, 2000);
});
Issue Description:
What's happening in your code is you are cloning and creating two IDs within a single DOM load, which means your javascript will have conflicting IDs to deal with. The other issue being that the youtube API creation function binds to an ID and not a class.
So after you've cloned your iframe, your original function (held in player) is now pointed at two places... hence the confusion.
Solution:
To combat this, we can use a placeholder. Based on the Youtube Player API Reference, Youtube allows for loading videos to a player object.
player.loadVideoById(videoId:String,
startSeconds:Number,
suggestedQuality:String):Void
[See Youtube API#Queueing_Functions]
We can use classes and object references to reach your goal:
player;
placeholder;
playerCount = 1;
$(function() {
// ... Previous code ... //
/**
* Assuming you have more than one video to play,
* the function will change to allow for incrementing the ids
* of each player made. [UNIQUE IDS]
*/
onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('player-'+playerCount, {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
placeholder = new YT.Player('placeholder', {
height: '390',
width: '640',
});
/**
* Now add a generic class so we can find all of these elements,
* and bind the object to a data instance for access later.
*/
$('#player-' + playerCount).addClass('youtube-player').data('YoutubeAPI', player);
playerCount++;
}
The placeholder comes into play now, when you carousel fires it's beforeChange event, you can access the player element from within the current/next/previous slide using the carousel's event handler and running a $(event.target).find('youtube-player') (or something like that, APIs are different, so YMMV) and access the player instance using $(event.target).find('youtube-player').data('YoutubeAPI') (or whatever you named your data variable).
Then you just find the video id from the original object (using the access scheme from above and taking the id from the youtubeAPI object) and load the video into the placeholder using the API call from above.
Is there any way to play one youtube video after another, or better yet, play a sequence of videos one after another with no breaks inbetween? I'm unsure how to do this using the youtube API, but I know it can be done somehow.
The easiest way is using Youtube API method to specify a playlist (check the docs). The harder way is to play the videos yourself, listening for the Video End event, then playing the next one.
About no breaks, that depends on a lot of things:
The speed of the internet connection
wether the videos have ads or not
If the videos have no ads, and you are not satisfied with the breaks you are getting, you might try to cue the next video say 5 seconds before the former video ends, then when you get the Video Finish event, just send a play to the next video. To do this, you have to sequence the videos yourself.
This is simple. I am assuming you have an array of video IDs you want to play. In your onStageChange function, listen for video ended state and once that happens, pick next video from array and start playing it. To play the next video, you need to call loadVideoById function followed by playVideo() call. Hope this helped.
And as #rupps said, whether your videos will run without any breaks one after another depends on factors like internet speed. You cannot buffer all videos of a playlist beforehand.
Visit this post to view the sample - Play a 2nd youtube video after first one has finished playing
I am having an array of video IDs that want to play. In your onStageChange function, on the video ended state, pick next video from array and start playing it. At the end of all array videos it will start again from initial.
<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 videoId = ['gCFpK_z0Y1o', '2XXzYCfBiAg', 'H-N2SynCSEs', '6PDBRoRFYvo'];
var player; currentVideoId = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
autoplay: 1,
// loop: 1,
// rel: 0,
// showinfo: 0,
// autohide: 0,
// modestbranding: 1,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById(videoId[currentVideoId]);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoId.length) {
player.loadVideoById(videoId[currentVideoId]);
} else {
currentVideoId = 0;
event.target.loadVideoById(videoId[currentVideoId]);
}
}
}
We are embedding a youtube player into our page. Easy implementation of code and html5 support driven us to use the youtube iframe player.
Problem is that view count does not work with the api. No video does not autoplay and we are playing the video with youtube's default play button.
When I revert back to a AS3 player view count seems to work.
Is it a bug in the iframe api?
Anyone come across a solve?
Thanks!!!
Views that originate as a result of clicking on one of the native player UI elements (either the play button in the control bar or on the static player image) will normally count towards incrementing the views for a video. There are obviously other signals that could come into play, but all things being equal, there's no reason why using an <iframe> embed vs. an ActionScript 3 embed should prevent views from being counted.
If you have a specific example of your implementation that you want to pass along, I can take a look and see if you're doing anything unorthodox.
we have created a simple test html file with a video using the YouTube iFrame API, as the idea is to have the videoplayer fall back to the HTML5 videoplayer on mobile devices. However views are not being counted on click to play video:
http://www.youtube.com/watch?v=-LHUt9FGgys
In the body of the html we have the following:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '-LHUt9FGgys',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
//event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
// done = true;
// }
}
function stopVideo() {
player.stopVideo();
}
</script>
It would be interesting to see if you or someone else has a solution for this. Thanks!