I'm using the following code (written by my friend, I'm a beginner in JS) to create several iframes with different youtube videos, which I can then link to from within the text with the seekTo(t) function –
var players = [];
function onYouTubeIframeAPIReady() {
YTready()
}
function createPlayer(ref, divID, videoID) {
players[ref] = new YT.Player(divID, {
height: '360',
width: '640',
videoId: videoID,
events: {}
});
}
function jumpToTimecode(ref,t){
for(var i=0;i<players.length;i++){
if(i!=ref){
players[i].stopVideo()
}
}
players[ref].seekTo(t)
players[ref].playVideo()
}
It includes a way to stop all other videos once the user clicks on the link. What I'd like to do is add a function that would do the same thing (stop all other videos on the page) if the user simply clicks the play button on one of the youtube players.
I was thinking of defining an 'onStateChange': onPlayerStateChange event in the createPlayer function, and then adding a function that upon any of the players changing their state to playing // if (event.data == 1) // would loop through all the players and stop any which were not the one which was clicked. I'm not sure, though, how to reference the player which was clicked (as it could be any of them, so I don't know its 'ref' value in advance).
Or is this the wrong way to approach this?
Any help would be very much appreciated.
Okay, I solved this (with my friend's help).
function onPlayerStateChange(event) {
if(event.data == 1) {
var ref = event.target.f.id
for(var i=0;i<players.length;i++){
if(players[i].f.id != ref){
players[i].stopVideo()
}
}
}
}
with the event.target.f.id being the unique id given (by me) to the player as it's created.
Related
The following JavaScript works great when I have only one instance of a YouTube video on a page:
function createVideo(playerElement, videoID, autoplay=false) {
const youtubeScriptId = 'youtube-api';
const youtubeScript = document.getElementById(youtubeScriptId);
if (youtubeScript === null) {
const tag = document.createElement('script');
const firstScript = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = youtubeScriptId;
firstScript.parentNode.insertBefore(tag, firstScript);
}
window.onYouTubeIframeAPIReady = function() {
return new window.YT.Player(playerElement, {
videoId: videoID,
playerVars: {
autoplay: autoplay,
modestbranding: 1,
rel: 0
}
});
}
}
But when I try to call this again, the video doesn't load. Only the first video. This method is called via a click event after the page has loaded, and I pass in a videoID data attribute and build my new YouTube video to show on the page.
I assume because my JavaScript is creating only one instance on the window object, and not separate multiple instances. After further research I can see that the onYouTubeIframeAPIReady() method only fires once on a page, so that explains why the subsequent calls when the click event fires this method fails. Since it is impossible for me to know how many exact instances to load on a page, how would I refactor this code to make it dynamic, so that unlimited instances can be created and played on a page via click events only? I've seen countless tutorials of building YouTube videos when you know the elements on a page. But in this scenario either I do not know what is on the DOM, or want to slow the site down on page load by building unlimited YT videos to be inserted into the DOM only to probably not be clicked to play by the user.
Is it even possible to dynamically create a new YouTube video on a page using their YT API bound to a click event? From what I am reading online, it looks like a person has to load all videos at once when onYouTubeIframeAPIReady() is first loaded on the page after the YT API loads, and I have to add extra logic in place to play/stop each and then bind additional click events per each video to show/hide/play/stop. This is going to increase my page load dramatically, and add a bunch of JS overhang to my page. I simply want to create a new video on a click event.
I hope you're not using the same videoID every time, because for multiple instances of anything you need to have some kind of sequential ID management, like this...
var ID=[], Vid;
for(var i=0; i<20; i++){ // create 20 video players
ID.push('V'+i);
Vid=document.createElement('video');
Vid.id=ID[i];
document.body.appendChild(Vid);
createVideo(e, ID[i], false); // Your function
}
You get the drift...
The core issue that you're experiencing is the YT.Player can only be initalized once on the page - and if you have multiple videos to be handled via the YT.Player you'd have to iterate over the videos one by one with the same YT.Player instance. It's a little weird at first, but can work - especially if you need to handle the videos via popup modals, etc.
Here's an example that I've used to iterate over a page that has multiple hidden modals with videos, and then handle the click events and playing the videos:
jQuery(document).ready(function ($) {
let modalTriggerElements = $('.video_play_icon'),
playerInfoList = [],
players = []
if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
let tag = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0]
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = 'youtube-api';
firstScript.parentNode.insertBefore(tag, firstScript)
}
if (modalTriggerElements.length > 0) {
$.each(modalTriggerElements, (index, element) => {
buildPlayersList(element)
modalTriggerClickEvent(element)
})
}
window.onYouTubePlayerAPIReady = function () {
if (typeof playerInfoList === 'undefined') return;
for (let i = 0; i < playerInfoList.length; i++) {
players[i] = createPlayer(playerInfoList[i]);
}
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.playerId, {
videoId: playerInfo.videoId,
playerVars: {
showinfo: 0,
}
});
}
function buildPlayersList(element) {
let $modelDiv = $(element).closest('.hc_module').next('.video_model'),
$playerDiv = $($modelDiv).find('#video-player');
playerInfoList.push({
'videoId': $($modelDiv).data('video-id'),
'playerId': $($playerDiv)[0],
});
}
function modalTriggerClickEvent(element) {
$(element).on('click', () => {
let $parentDiv = $(element).closest('.hc_module'),
$nearestVideoDiv = $parentDiv.next('.video_model'),
$closeDiv = $nearestVideoDiv.find('.close_modal')
$nearestVideoDiv.css('display', 'block')
$nearestVideoDiv.attr('aria-hidden', 'false')
$closeDiv.on('click', () => {
$nearestVideoDiv.css('display', 'none')
$nearestVideoDiv.attr('aria-hidden', 'true')
players.forEach((el) => {
el.stopVideo();
});
})
})
}
});
When you don't know how many players you can use random numbers to avoid conflicts...
var ID=[]; // Global array
function AddVideoPlayer(){
var Vid, i=ID.length-1;
ID.push('V'+RandomNumber(99999999));
Vid=document.createElement('video');
Vid.id=ID[i];
document.body.appendChild(Vid);
createVideo(e, ID[i], false); // Your function
}
I would like to display an image with a play button, as soon as someone clicks the image I create a youtube player play it. As soon as someone clicks on the "pause" button I would like to hide the player and show the image again.
Is there some kind of callback I can use? I tried to use the onStateChange callback
onStateChange: function (event) {
if (event.data === 2) {
// logic to hide it
}
}
The problem is: this event is fired when someone changes the time as well, so as soon as a user left click the timeline the video signals to "pause" and becomes hidden. Can I somehow check if the video is just buffering/changing the position instead of pausing actively by a user?
Hopeing this to work...
</script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'RWeFOe2Cs4k',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
console.log(playing)
if(!playing){
alert('hi');
playing = true;
}else{
playing = false;
}
}
</script>
I am having issues getting the youtube api working. The API itself loads and the onYouTubeIframeAPIReady() function gets called, but the onReady doesn't work.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
log('API')
log(document.getElementById('yt-pilezspnvu'));
var player = new YT.Player('yt-pilezspnvu', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
log(event);
}
function onPlayerStateChange(event) {
log(event);
}
The code above isn't wrapped in any functions or anything. The errors in the picture below are just my adblock stuff. I've tried adding origin=http://example.com as pointed out in this thread https://stackoverflow.com/a/20505337/736967 but still not working.
I think that you need some extra bits that are missing.
Try adding in this to your code.
ytplayer = new YT.Player('ytplayer', {
height: '385',
width: '640',
videoId: '[your-videoID]',
playerVars: {'wmode': 'opaque', 'autohide': 1 , 'enablejsapi': 1 , 'origin': 'http://www.yousite.com', 'rel': 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
}
playerVars has many parts and you can use or not. But you definatly need to have something load into the player. VideoID or PlayList. Else nothing will happen.
I had a similar issue with an overlay image being clicked and the onReady event never seemed to fire even though all the other events did; obvious through console logs in each.
The issue was apparently a race event. Clicking the overlay image should remove the image and start the YouTube video playing. I also have several videos on the same page. The click event to play the video should be placed inside the onReady event instead of the click event firing the play event. I have trimmed this down as much as I could as our DOM has several elements inside the video container, including the overlay image, captions, etc.
Here is my solution:
var player = new Array;
window.onYouTubeIframeAPIReady = function() {
// Loop through the existing video iframes designated with the inital string 'vidframe_' in the id
jQuery('iframe[id^="vidframe_"]').each(function (i, val) {
var $this = $(this); // iframe container
var $vidWrapper = $this.closest('.video-wrapper');
// Make sure it is a YouTube video. This data attribute is set when the iframe is created by my code
if( $vidWrapper.data("video-source") == "youtube" )
{
// Initialize each YouTube video present
player[i] = new YT.Player($this.attr('id'), {
events: {
onReady: function(event) {
// Set the click event listener here
$vidWrapper.on("click", function() {
// Target the overlay image
// 'this' is now the .video-wrapper image element
var imgOver = $(this).find('figure');
// Remove image overlay
if( imgOver )
imgOver.fadeOut();
// Target the right player
player[i].playVideo();
});
}
}
});
}
});
};
I hope this helps anyone else who may be searching for an errorless onReady event not seemingly working. This css-tricks article is what really gave me the best clue.
I've spent the day banging my head on this. I've made some good progress, but this last part has me stuck.
I'm using YouTube's API. I have a listener event configured, and the video autoplays, and autocloses on completion. All of that works great.
What I want to do is have more than one video on a single page (5, actually) assigned by DIV. Is there a way to do that with this code?
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '488',
width: '800',
videoId: '49QKXdRTX-A',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
}
}
Additionally, it's worth mentioning that I will have a couple of these videos auto-show another DIV on completion, so something like this:
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
$("#gallery-main").show();
ANY help would be greatly appreciated. Thanks!
I've got some YouTube embedding code (I will paste only code which is causing the trouble for me and cut things which are not public):
console.log(ytplayer);
ytplayer.playVideo();
Console.log on Chrome and on FF shows me good objects with correct methods, and method playVideo() exists there. And it works for all other browsers I checked, but it doesn't work on FF!? What is even more interesting, that when I play video using normal YouTube play button then I can use pauseVideo() method (and all the others: seeking, controlling volume), but I can't use playVideo() method...
I use new way of embedding video:
ytplayer = new YT.Player(player, {
height: height,
width: width,
videoId: videoid,
allowfullscreen: 'true',
playerVars: {
controls: 0,
showinfo: 0,
wmode: 'opaque',
autoplay: (autoplay ? 1 : 0)
},
events: {
'onReady': function () {
console.log('I am ready');
}
}
});
Of course 'I am ready' is in console output. I have no idea what I do wrong and why only FF is not working... There is no JS error, and no clue... Hope someone had this problem before and got it resolved!:)
I was having a very similar issue and was struggling with an answer. My calls to playVideo() didn't seem to work.
ORIGINAL:
$('#play_movie').click(function(){
$('#video').show();
if(player)
{
if(typeof player.playVideo == 'function')
{
player.playVideo();
}
}
The issue was that the player was not yet available - if I just gave it a bit of time to show up, then the call worked
$('#play_movie').click(function(){
$('#video').show();
if(player)
{
var fn = function(){ player.playVideo(); }
setTimeout(fn, 1000);
}
Don't know if this is your exact issue, but I hope it helps someone
A more robust way to do that is to check if the player is ready. If the player is not ready, queue player.playVideo() and execute it when it is ready using the onReady event. Gist
var playerConfig = {}, // Define the player config here
queue = { // To queue a function and invoke when player is ready
content: null,
push: function(fn) {
this.content = fn;
},
pop: function() {
this.content.call();
this.content = null;
}
},
player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('player', {
videoId: 'player',
playerVars: playerConfig,
events: {
onReady: onPlayerReady
}
});
};
// API event: when the player is ready, call the function in the queue
function onPlayerReady() {
if (queue.content) queue.pop();
}
// Helper function to check if the player is ready
function isPlayerReady(player) {
return player && typeof player.playVideo === 'function';
}
// Instead of calling player.playVideo() directly,
// using this function to play the video.
// If the player is not ready, queue player.playVideo() and invoke it when the player is ready
function playVideo(player) {
isPlayerReady(player) ? player.playVideo() : queue.push(function() {
player.playVideo();
});
}
I came across this post looking for something similar. I found my answer here, by relic180:
YouTube API - Firefox/IE return error "X is not a function" for any 'player.' request
Basically, Chrome can initialize youtube embeds even when the divs are hidden (i.e. display:none), but FF and IE can't. My solution was a variant of relic180's:
I move my player to left:200% or whatever when I want it invisible but getting initialized (and available for other calls to player), then move it back on screen when I need it.
I personally found on preset IFrames, that the API won't work properly if you wouldn't use https://www.youtube.com as the domain. So be careful not to miss on the "www". Otherwise the API will create the player object but will fail to execute methods.