Plusieurs vidéos dans un même lecteur

Bonjour à tous,

Je viens de finaliser le site de ma société de production audiovisuelle, qui se résume à une page unique sur laquelle sont pour l'instant embedées des vidéos des projets que j'ai fait, via des iframes depuis vimeo . C'est une sorte de portfolio, avec une vidéo "principale" (une bande démo), et des extraits.

<iframe src="//player.vimeo.com/video/showreel" class="showreel" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<iframe src="//player.vimeo.com/video/video1" class="extrait" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="//player.vimeo.com/video/video2" class="extrait" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
....
<iframe src="//player.vimeo.com/video/videolast" class="extrait" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

La taille de ces iframe est contrôlée par css, le showreel fait 480x270px tandis que les autres vidéos font 240x135px.

J'aimerais transformer le tout de telle sorte à ce que, à la place du showreel, il y ait un lecteur "préchargé" avec le showreel au moment de l'ouverture de la page, et à la place des iframe je souhaite mettre des vignettes (photos), qui au click envoient la vidéo dans le lecteur. Qu'il n'y ait donc qu'un seul lecteur sur la page.

Les vidéos quant à elles seraient toujours hébergées chez Vimeo, j'ai un compte qui me permet de récupérer le lien de mes extraits et d'éviter d'utiliser leur lecteur.

J'ai l'impression qu'une telle option est possible en javascript, mais autant je comprends et j'utilise HTML et CSS, autant je ne comprend rien à ce langage ! J'ai donc cherché un code tout fait, sans résultat, j'ai également essayé de suivre des cours Javascript, mais je suis rapidement largué.

Bref, pouvez-vous m'aider ? Existe-t-il un code à récupérer quelque part qui répond à cette config ? J'ai commencé à coder en utilisant le lecteur videojs.com, mais pour l'instant je n'arrive à rien

En résumé je cherche à avoir :
Un seul lecteur sur la page, avec une vidéo (bande annonce) déjà chargée à l'ouverture de la page (il n'y a plus qu'à faire "play" pour la lancer).
Des vignettes d'autres vidéos (idéalement avec un effet "onmouseover" qui me permettrait de rajouter un "play button" quand l'internaute passe dessus).
Vidéos qui se lancent dans le lecteur lorsqu'on clique sur la vignette correspondante.

Merci d'avance pour votre aide !
Nicolas

Salut,

avec la balise video de html5 et un tout petit peu de javascript cela marche relativement facilement. Il suffit d'utiliser une fonction pour changer la source de la balise video et cela fonctionne
Exemple : https://jsfiddle.net/b5b4b1dq/

Je n'ai pas mis les boutons de contrôle, il faut cliquer sur la video pour la lancer, mais dans l'absolu ça revient au même.
Modifié par mathieu1004 (09 May 2017 - 17:27)

Bonjour Mathieu,

Merci beaucoup pour ton aide !
Cependant, ça ne fonctionne pas dans mon codage... En effet, l'image ne devient pas clickable ! Peut-être est-ce dû à de "mauvaises" interactions avec le code existant ? Pour te rendre compte, voici le site en question : www.monboprod.fr/test.html

Voici le code html :

<div id="captations">
<section>
<h1>CAPTATIONS ET TEASERS</h1>
<p>
<video id="video" class="video-js vjs-default-skin" 
      controls preload="none" poster="test.jpg"
      data-setup="{}" src="https://player.vimeo.com/external/216307767.hd.mp4?s=80567c4a596a55e6a3016d67a38e9c140f8e4f31&profile_id=119" type="video/mp4" />
  </video>
<img src="lapoupeesanglante.jpg" onClick="changevideo(1)" height="135px" width="240px"/>
</p></section></captations>

Le code css (je fais appel au lecteur de videojs.com) :

section
{
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
background-color:#e6e6e6;
max-width: 1050px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
padding:20px;
border-radius:20px;
}
p
{
display:flex;
align-items:baseline;
justify-content: center;
flex-wrap: wrap;
}
.video-js {
  font-size: 10px;
  color: #fff;
  height:270px;
  width:480px;
}
.vjs-default-skin .vjs-big-play-button {
  font-size: 2em;
  line-height: 1.5em;
  height: 1.5em;
  width: 1.5em;
  border: 0.06666em solid #fff;
  border-radius: 0.3em;
  left: 50%;
  top: 50%;
  margin-left: -0.75em;
  margin-top: -0.75em;
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: #e6e6e6;
  background-color: rgba(230, 230, 230, 0.3);
}
.video-js .vjs-slider {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.5);
}
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}
.video-js .vjs-load-progress {
  background: white;
  background: rgba(255, 255, 255, 0.5);
}
.video-js .vjs-load-progress div {
  background: white;
  background: rgba(255, 255, 255, 0.75);
}

Et le javascript dans un fichier js (qui contient une autre fonction pour des scrolling "smooth") :

$('nav a').click( function() {
		var page = $(this).attr('href'); 
		var speed = 400;
		$('html, body').animate( { scrollTop: $(page).offset().top - 130 }, speed );
		return false;
	});

Video=document.getElementById("video"); 

function changevideo(value){
  if(value==1)
  {
  Video.src="https://player.vimeo.com/external/215988962.hd.mp4?s=7675f70ba2fd93ed4007e1cdbb38ff1c53367145&profile_id=119";
  }
}

Peux-tu m'éclairer ?
Merci beaucoup !
Nicolas

Hello,

Il y a un problème dans ton HTML :

</captations>

n'existe pas. Tu devrais remplacer par

</div>

Pardon c'est une coquille de ma part, car je n'ai pas mis la totalité du code ici afin de ne pas charger. Dans mon éditeur c'est bien </div> plutôt que </captations>.

Le problème ne doit donc pas venir de là...

Merci de prendre du temps pour mon problème !

Non, pas d'erreur ni d'avertissement javascript dans la console, pas d'erreur CSS non plus, en revanche quelques avertissements CSS, qui sont liés au fichier video-js.css appelé par le site, qui contrôle le lecteur que j'utilise (videojs.com).

J'ai fait un fiddle avec l'intégralité de mon code, car en effet sur ton exemple ça fonctionne, mais une fois intégré au site ça ne fonctionne plus : https://jsfiddle.net/vbcqkcdg/

Si tu arrives à comprendre... Est-ce que ça pourrait être dû justement à ces fichiers appelés par le lecteur ? Il y a 2 fichiers externes :
http://vjs.zencdn.net/5.8.8/video.js
http://vjs.zencdn.net/5.8.8/video-js.css

Merci beaucoup !

EDIT : le script fonctionne quand je laisse tomber l'appel au player, et que j'utilise la balise video seule. Le problème vient donc du lecteur, et je pense du fichier video.js
Modifié par nb75008 (10 May 2017 - 17:56)