Hi all,
I have a database called “songs” where one of the columns is named “youtubeUrl”. I am trying to use a function to randomly select a URL from the database and play it in the Youtube video player on my site each refresh.
I tried different ideas I found online but most were related to random image generation, and I couldn’t get it working for my case, here is one of the codes I tried attached.
Thanks for your help!
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(async function () {
// Check the render env so this is just done once.
// Otherwise, server-side will render, and then the image
// switches to the image that the client-side rendered.
if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {
let res = await wixData.query("songs").find();
let items = res.items;
let count = items.length; // how many images do we have?
let rnd = Math.floor(Math.random() * count);
$w('#image1').src = items[rnd].image; // get a random image
$w('#image1').show(); // image on page is hidden, we we now show it
}
});
Hi Kevin 
You already have the code to do it, just get the link of the video instead of the image src.
wixData.query("songs").find().then((result) => {
if (result.length > 0) {
let count;
while (typeof count !== 'number' || !count > 0) {
count = Math.floor(Math.random() * result.items.length)
}
let item = result.items[count];
if (item.video) {
$w('#video').src = item.video;
}
}
})
Hope this helps~!
Ahmad
Still pretty lost… I tried using my original code and modifying the #…
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(async function () {
// Check the render env so this is just done once.
// Otherwise, server-side will render, and then the image
// switches to the image that the client-side rendered.
if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {
let res = await wixData.query("songs").find();
let items = res.items;
let count = items.length; // how many video links do we have?
let rnd = Math.floor(Math.random() * count);
$w('#videoPlayer1').src = items[rnd].image; // get a random video url
$w('#videoPlayer1').show(); // video on page is hidden, we we now show it
}
});
I also tried modifying the code posted by you but couldn’t get it going. I either get the default Wix video to play, or just a black video player screen with loading icon.
Hi @kevincarapanta , you’re assigning the image src to the video src, that’s probably the reason.
$w('#videoPlayer1').src = items[rnd].image;
Change the “image” key to the video key, for example:
$w('#videoPlayer1').src = items[rnd].video;
Also, you must check whether there’s a video or not in that field before assigning an undefined value to the src method of the video player as I did in my code:
if (item.video) {
$w('#video').src = item.video;
$w('#video').show()
}
@ahmadnasriya
Hi Ahmad,
Thanks for the help thus far, I think I am close now. Currently I get a video displaying and playing from my database, however, it is the first video in my database every time I refresh (index 0). I’ve attached the Console output on the preview webpage, the final number (3) identifies the index value, so it should be showing the 4th video in my list, however, the first is displayed.
Could you point me to some documentation on understanding the items.youtubeURL part? Perhaps it is this, not sure. youtubeURL fyi is the field key for the column in my collection which stores the youtube URL as field Type = URL. I’ve tried items.youtubeURL and items.video . Your input is appreciated, thanks!
Code:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(async function () {
// Check the render env so this is just done once.
// Otherwise, server-side will render, and then the image
// switches to the image that the client-side rendered.
if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {
let res = await wixData.query("songs").find();
let items = res.items;
console.log(items);
let count = items.length; // how many video URLs do we have?
console.log(count);
let rnd = Math.floor(Math.random() * count);
console.log(rnd);
if (items.youtubeURL) {
$w('#videoPlayer1').src = items[rnd].youtubeURL; // get a random video
$w('#videoPlayer1').show(); // image on page is hidden, we we now show it
}
}
});
Troubleshooting can be a puzzle. For the issue you’re facing, have you explored the documentation on handling items.youtubeURL in your context? Understanding its specifics might be the key.
By the way, while you’re diving into YouTube-related stuff, have you ever considered delving into the world of YouTube automation business? It could be a fascinating journey!