51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
|
|
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel
|
|
|
|
export const vCarousel = (vContainers:string[]) : void =>
|
|
{
|
|
interface videoDOM
|
|
{
|
|
containerElt: HTMLElement;
|
|
videoElt: HTMLMediaElement;
|
|
}
|
|
|
|
// On commence par vérifier que les ids de conteneurs fournis sont correctes
|
|
const realVContainers : videoDOM[] = [];
|
|
for(let container of vContainers)
|
|
{
|
|
let checkContainerExist=document.getElementById(container);
|
|
if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ?
|
|
console.error("Aucun élément HTML trouvé dans la page pour l'id "+container);
|
|
else
|
|
{
|
|
let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+container+" video");// tester avec + plusieurs vidéos dans le conteneur
|
|
if(checkVideoExist===null)
|
|
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+container);
|
|
else
|
|
realVContainers.push({containerElt:checkContainerExist, videoElt: checkVideoExist});
|
|
}
|
|
}
|
|
let nbContainers=realVContainers.length;
|
|
if(nbContainers < 2)
|
|
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
|
else
|
|
{
|
|
for (let i = 0; i < nbContainers; i++)
|
|
{
|
|
let container=realVContainers[i].containerElt;
|
|
let video=realVContainers[i].videoElt;
|
|
if(i!==0)
|
|
container.style.display = "none";
|
|
video.addEventListener("ended", function()
|
|
{
|
|
container.style.display = "none";
|
|
let nextContainer: HTMLElement;
|
|
if(i < (nbContainers-1))
|
|
nextContainer=realVContainers[i+1].containerElt;
|
|
else
|
|
nextContainer=realVContainers[0].containerElt;
|
|
nextContainer.style.display = "block";
|
|
});
|
|
}
|
|
}
|
|
} |