web-dev-qa-db-fra.com

Vidéo HTML5 comment lire deux vidéos dans un élément vidéo

J'essaie d'obtenir deux vidéos différentes à lire dans un élément vidéo, mais mettre deux sources ne lit que la première. Dois-je faire cela avec jQuery? Code (HTML):

<video autoplay loop id="bbgVid">
<source src="style/mpVideos/mpv1.mp4" type="video/mp4">
<source src="style/mpVideos/mpv2.mp4" type="video/mp4">
</video>
javascriptjqueryhtmlhtml5video
13
Jojo01

Comme je l'ai mentionné dans les commentaires, la liste des sources n'est pas une playlist mais un ensemble de sources alternatives. Une fois que le navigateur en trouve un qui est pris en charge, les autres sont ignorés. Vous devrez utiliser JavaScript pour obtenir ce que vous voulez (indépendamment de le faire avec un ou deux tags vidéo).

Comme dans la question que vous mentionnez pour n'avoir qu'une seule balise video avec les différentes sources, voici une possibilité. L'idée est la suivante:

  • Ajoutez un écouteur d'événements à la fin du film.
  • Modifiez le video src avec le src du source suivant une fois la vidéo terminée.
  • Notez que cette solution considère que toutes les vidéos sources seront prises en charge.

En JavaScript, ce serait quelque chose comme ceci:

var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {
  // get the active source and the next video source.
  // I set it so if there's no next, it loops to the first one
  var activesource = document.querySelector("#myvideo source.active");
  var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");
  
  // deactivate current source, and activate next one
  activesource.className = "";
  nextsource.className = "active";
  
  // update the video source and play
  myvid.src = nextsource.src;
  myvid.play();
});
<video id="myvideo" width="320" height="240" controls style="background:black">
  <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

Les vidéos proviennent de la page vidéo HTML5 de W3Schools .

Comme spécifié par Kaiido dans les commentaires, une alternative plus simple serait d'avoir la liste des vidéos dans un tableau en JavaScript et de mettre à jour la source video en conséquence au lieu d'avoir plusieurs sources directement sous la vidéo:

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

Vous pouvez également le voir fonctionner sur ce JSFiddle: http://jsfiddle.net/bnzqkpza/

25
Alvaro Montoro