Besoin d'aide pour un mur de vidéo HTML5

[Lupine]

Au secours les webmasters !!
Nuit blanche à tenter de trouver une solution pour lire plus de 15 vidéos en simultanée sur la même page web avec la balise <video> mais pas de solution, toujours 6 vidéos sur 21 qui n'apparaissent pas... Si quelqu'un à une solution je suis preneuse ! Il sera considéré comme mon sauveur !

En fait le but n'est pas de mettre les vidéos en ligne, justement pour les problèmes de bande-passante et surtout d'hébergement qui me couterait une somme mirobolante vu l'espace que prendrait toute les vidéos, mais seulement l'utilisation de la page html en locale.
Le but étant de pouvoir présenté une mosaïque de vidéo en lecture instantanée avec lesquelles on peut interagir (couper le son, mettre en plein écran, faire pose...).
La présentation de ce travail se ferait ensuite à l'aide des rétroprojecteurs contre un mur.

EDIT : le travail ne sera donc pas accessible en ligne mais uniquement sur le lieux de l'exposition !

[Tugdual]

le travail ne sera donc pas accessible en ligne mais uniquement sur le lieux de l'exposition !

Ok.

Même en local, tu risques d'avoir deux goulets d'étranglements sur la machine qui va gérer cette page :
- 1 : le mélange des sons car toutes les pistes sonores des vidéos vont converger vers une seule sortie;
- 2 : la gestion même de l'affichage de toutes ces vidéos qui va finir par surcharger le processeur.

Une piste peut-être :
- créer pour chaque vidéo une image GIF animée avec 10, 20 ou 30 images tirées de la vidéos;
- créer une page html avec ces images GIF animées, chacune d'elle contenant un lien vers la vidéo réelle.
Ainsi, l'affichage de toutes les images GIF animées ne devrait pas poser de problème,
et cliquer sur l'une d'elle redirige alors vers une autre page consacrée à la vidéo concernée ...

[Lupine]

Merci pour la réponse !
La saturation du son est le but de cette pièce !
Le processeur n'a aucun soucis pour lire autant de vidéo car elle passe par les codecs inclues par le navigateur et qu'elles sont de très basse résolution,
j'ai déjà testé sur le imac mis à disposition par mon école en lisant toutes les vidéos en simultanées en passant par vlc (plus gourmand qu'un seul navigateur), il tenait très bien la route.

Le vrai problème c'est que sur ma page index, j'ai 21 vidéos d'appelé avec plusieurs balises <video> placées dans des <div> distincts mais seule 15 vidéos apparaissent aléatoirement une fois la page chargée et ceux uniquement sous IE.

J'ai pensé que ça venait de l'encodage et du format des vidéos, j'ai donc triplé mes sources vidéos en les convertissant dans les trois formats lisibles par tout les navigateurs qui gèrent le HTML 5 : .webm, .ogv, .mp4.

Mais rien n'y fais ! Je me demande si la balise <video> n'est pas limitée à 15 appels en dehors de la balise <canvas> ou si j'ai simplement loupé un truc un erreur dans le code...

Je peux peut-être transmettre mon code par ici :

<div id="content">

<div class="bloc-video marge30">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/4.mp4" type="video/mp4" />
<source src="../video/webm/4.webm" type="video/webm" />
<source src="../video/ogv/4.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/2.mp4" type="video/mp4" />
<source src="../video/webm/2.webm" type="video/webm" />
<source src="../video/ogv/2.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/9.mp4" type="video/mp4" />
<source src="../video/webm/9.webm" type="video/webm" />
<source src="../video/ogv/9.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/1.mp4" type="video/mp4" />
<source src="../video/webm/1.webm" type="video/webm" />
<source src="../video/ogv/1.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/5.mp4" type="video/mp4" />
<source src="../video/webm/5.webm" type="video/webm" />
<source src="../video/ogv/5.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge30">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/6.mp4" type="video/mp4" />
<source src="../video/webm/6.webm" type="video/webm" />
<source src="../video/ogv/6.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/7.mp4" type="video/mp4" />
<source src="../video/webm/7.webm" type="video/webm" />
<source src="../video/ogv/7.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/8.mp4" type="video/mp4" />
<source src="../video/webm/8.webm" type="video/webm" />
<source src="../video/ogv/8.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/3.mp4" type="video/mp4" />
<source src="../video/webm/3.webm" type="video/webm" />
<source src="../video/ogv/3.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/10.mp4" type="video/mp4" />
<source src="../video/webm/10.webm" type="video/webm" />
<source src="../video/ogv/10.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge30">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/11.mp4" type="video/mp4" />
<source src="../video/webm/11.webm" type="video/webm" />
<source src="../video/ogv/11.ogv" type="video/ogg" />
</video>
</div>

<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/12.mp4" type="video/mp4" />
<source src="../video/webm/12.webm" type="video/webm" />
<source src="../video/ogv/12.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/13.mp4" type="video/mp4" />
<source src="../video/webm/13.webm" type="video/webm" />
<source src="../video/ogv/13.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/14.mp4" type="video/mp4" />
<source src="../video/webm/14.webm" type="video/webm" />
<source src="../video/ogv/14.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/15.mp4" type="video/mp4" />
<source src="../video/webm/15.webm" type="video/webm" />
<source src="../video/ogv/15.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge30">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/16.mp4" type="video/mp4" />
<source src="../video/webm/16.webm" type="video/webm" />
<source src="../video/ogv/16.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/17.mp4" type="video/mp4" />
<source src="../video/webm/17.webm" type="video/webm" />
<source src="../video/ogv/17.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/18.mp4" type="video/mp4" />
<source src="../video/webm/18.webm" type="video/webm" />
<source src="../video/ogv/18.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/19.mp4" type="video/mp4" />
<source src="../video/webm/19.webm" type="video/webm" />
<source src="../video/ogv/19.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge25-l">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/mp4/20.mp4" type="video/mp4" />
<source src="../video/webm/20.webm" type="video/webm" />
<source src="../video/ogv/20.ogv" type="video/ogg" />
</video>
</div>
<div class="bloc-video marge25-top marge30">
<video width="350" height="200" preload="true" autoplay loop>
<source src="../video/webm/21.mp4" type="video/mp4" />
<source src="../video/mp4/21.webm" type="video/webm" />
<source src="../video/ogv/21.ogv" type="video/ogg" />
</video>
</div>
</div>

[Tugdual]

Le processeur n'a aucun soucis pour lire autant de vidéo car elle passe par les codecs inclues par le navigateur et qu'elles sont de très basse résolution,
j'ai déjà testé sur le imac mis à disposition par mon école en lisant toutes les vidéos en simultanées en passant par vlc (plus gourmand qu'un seul navigateur), il tenait très bien la route.

Ok.

Le vrai problème c'est que sur ma page index, j'ai 21 vidéos d'appelé avec plusieurs balises <video> placées dans des <div> distincts mais seule 15 vidéos apparaissent aléatoirement une fois la page chargée et ceux uniquement sous IE.

Si je comprends bien, le problème ne manifeste sous IE.
Que donnent les autres navigateurs, tel que Firefox et Chrome ?

Je ne suis hélas pas spécialiste du HTML 5 et de ses nouvelles balises.

Tu peux aussi poser le problème sur le forum des développeurs francophones.
Du temps où je développais, j'aimais bien ce site ...

[Lupine]

Sous IE c'est là où il y a le moins de problème justement.
Firefox n'affiche que 6 vidéos et Safari aucune...
Je n'ai pas encore essayé sous Chrome.

Merci beaucoup pour le lien du forum, je vais aller jeter un coup d'oeil !