11548 sujets

JavaScript, DOM et API Web HTML5

Plusieurs liens vidéo pour un lecteur unique

Bonjour,

Je suis en train de concevoir un site dont la navigation repose sur AJAX .
Comme le montre l'image, c'est un portfolio commercial pour une personne faisant de la vidéo. Seule la partie blanche est modifiée lorsque l'internaute clique sur un lien.
Ce qui signifie que le lecteur vidéo au-dessus reste intact, ce qui évite de le charger à chaque fois que l'on change d'onglet.

Mon problème est que dans la partie réalisations, je compte mettre quelques liens images qui correspondront à des vidéos. Et j'aimerais qu'en cliquant sur un des liens, la vidéo soit chargée dans le lecteur vidéo principal.

Le lecteur utilisé est videojs

merci d'avance.

P.S: c'est encore tout moche, je peaufinerai la mise en page à la fin, désolé si ça pique les yeux Smiley cligne

upload/36473-siteenajax.png
Modifié par Arkos971 (20 May 2011 - 14:24)
Il est facile de coder son propre lecteur vidéo, donc si tu veux quelque chose de souple que tu peux améliorer à ta guise tu sais quoi faire Smiley smile !
Mon problème n'est pas tant la souplesse du lecteur mais la possibilité de modifier (via javascript surement) le lien dans la balise vidéo du lecteur.

    <video id="video1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="images/video.png">
      
      <source src="[#red]http://lien-a-modifier.mp4[/#]" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

</video>


Cependant, modifier le lien ne suffit pas, car il faudrait relancer le lecteur vidéo pour qu'il prenne en compte la modification du code.

Et cet enchainement (modifier l'url de la video puis relancer le lecteur sans recharger la page), je ne sais pas trop comment m'y prendre.
Modifié par Arkos971 (20 May 2011 - 15:14)
A vu de pif, un truc basic de ce genre devrait fonctionner, non ?
img.onclick=function(){
  var player=document.getElementById('video1');
  var video=this.parentNode.href;
  player.getElementsByTagName('source')[0].src=video;
  return false;
}
Lorsque je tente le script sur un exemple simple, il charge directement le lien de video2 au lieu de relancer le lecteur avec la vidéo2 comme source.

En gros, le navigateur tente de charger "http://video2" au lieu de rester sur la meme page et de relancer le lecteur avec les nouvelles données.

<div class="video-js-box">
    
    <video id="video1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="poster.png">
        
        <source src="video-exemple.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        
        <source src="video-exemple.webm" type='video/webm; codecs="vp8, vorbis"' />
        
        <source src="video-exemple.ogv" type='video/ogg; codecs="theora, vorbis"' />
    
    </video>

</div>

<a id="video2" href="video2" onClick="img.onclick()">changer</a><br>



<script language="JavaScript" type="text/javascript">
img.onclick = function(){ 
  var player = document.getElementById('video1'); 
  var video = this.parentNode.href; 
  player.getElementsByTagName('source')[0].src=video;  

 
  return false; 
}
</script>

Modifié par Arkos971 (21 May 2011 - 14:22)
Ah oui mais non, la fonction que j'ai donné est à appliqué sur une balise img (ou autre) contenue dans une balise a, pas directement sur une balise a ^^'

D'ailleurs, plutôt qu'un return false, il faudrait plutôt mettre un evnt.stopPropagation(); et ajouter l'argument evnt dans le prototype de la fonction.

Pour IE8-, il faut remplacer evnt.stopPropagation(); par window.event.cancelBubble;.
Ca marche ! voici mon nouveau code

<body>

<div class="video-js-box">
    
    <video id="video1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="poster.png">
        
        <source src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        
        <source src="video1.webm" type='video/webm; codecs="vp8, vorbis"' />
            
    </video>

</div>

<a id="video2" href="video2.webm"><img src="image.png" width="30" height="30" onClick="img.onclick()"></a><br>

</body>


<script language="JavaScript" type="text/javascript">
img.onclick = function(){ 
  var player = document.getElementById('video1'); 
  var video = this.parentNode.href;
  var evnt = player.getElementsByTagName('source')[0].src=video
  player.getElementsByTagName('source')[0].src=video;  

 
 evnt.stopPropagation(); 
}
	document.getElementById("video-js-box").style.display="none";
	document.getElementById("video-js-box").style.display="";
</script>


Cependant, ma question est maintenant de savoir comment remplacer toutes les occurrences de la video1, dans ses différents formats?

Actuellement, je peux juste charger une vidéo, donc un format unique, dans le lecteur.

Ce qu'il me faudrait c'est changer la source tous les formats (.webm, .mp4 et .ogv) afin d'avoir une compatibilité pour tous les navigateurs.

Peut-être alors qu'il faudrait revoir le problème sous un autre angle:

faire de façon à ce que "quand je clique sur le lien, le navigateur copie l'id du lien (id=video2) et place cette id dans les différentes <source> de la balise <video>, à la place de video1 et en conservant les extensions".

Cela nécessite alors peut-être du php (modification dynamique).
Modifié par Arkos971 (24 May 2011 - 00:07)
Dans ce cas là, tu peux utiliser les attributs data-* au lieu de href.

Dans la balise img ou a, tu doix ajouter un attribut data-video-src contenant le nom de ta video, un attribut data-video-type qui contient le mime et un dernier attribut data-video-codec qui contient le codec.

Et dans le js, au lieu de faire appelle à href, tu fais appelle à data-video-*.
Merci beaucoup de tes réponses rapides.

Je ne connaissais pas les attributs data-* et en cherchant sur le net je n'ai trouvé pratiquement aucune info(!).

Cependant, je vois ma comment je peux "attribuer" trois sources différences à un même lien !

Même si j'écris les data-* pour chaque vidéo les un à la suite de l'autre dans le lien, comment les considérer séparément dans le JS ?

Pourrais tu reprendre le code que j'ai écrit pour expliciter la technique que tu préconises ?

Désolé d'être aussi insistant, c'est la première fois que je me retrouve face à de telles difficultés.

Merci d'avance.
C'est apparue avec HTML5, c'est pour ça qu'il y a pas énormément d'infos dessus. Si tu veux te documenter un peu mieux dessus, cherche "custom data attribute".

Pour récupérer un attribut data-video-src, t'as plusieurs solution :
-en passant par la méthode getAttribute('data-video-src')
-en passant par l'objet dataset : balise.dataset.videoSrc

Actuellement, la première méthode fonctionne partout (du moins, partout où la balise video est supportée). La seconde fonctionne à partir de Chrome 8, Opera 11.10, Firefox 6 et probablement IE10. J'ai pas testé avec Safari 5.

Les attributs data sont à mettre dans la balise img ou a, comme tu veux (à la limite, t'as même plus besoin de la balise a, en fait, ce qui permet de ne pas faire appel à stopPropagation).

Pour le code HTML, tu aurais un truc du genre :
<body>
    <div class="video-js-box">
        <video id="video1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="poster.png">
            <source /> 
        </video> 
    </div>
    <ul id="video2">
        <li><img src="image.png" width="30" height="30" data-src="video.webm" data-type="video/webm" data-codec="vp8, vorbis" /></li>
        <li><img src="image.png" width="30" height="30" data-src="video.mp4" data-type="video/mp4" data-codec="avc1.42E01E, mp4a.40.2" /></li>
    </ul> 
<body>

J'ai utilisé un structure ul/li qui est plus adapté syntaxiquement et sémantiquement.

Et pour le JS :

var setVideoSrc=function(){
    var source = document.getElementById('video1').getElementsByTagName('source')[0];
  
    source.setAttribute('src', this.getAttribute('data-src'));
    source.setAttribute('type', this.getAttribute('data-type'));
    source.setAttribute('codec', this.getAttribute('data-codec'));
}

var videos=document.getElementById('video2').getElementsByTagName('img');
var maxVideos=videos.length;

for(var t=0; t<maxVideos; t++) videos[t].onclick=setVideoSrc;

L’événement click est posé via js, ce qui évite de le faire dans le HTML.
Modifié par MacIntoc (25 May 2011 - 10:31)
Merci encore pour tes réponses.

C'est vrai que je ne me suis pas encore mis au HTML 5, mis à part quelques notions déjà très utilisées.

Je n'ai pas le temps de tester immédiatement ce que tu proposes, cependant ton HTML semble proposer un lien image pour chaque version de la vidéo. Soit une image pour video2.webm, et une image pour video2.mp4.

Cela signifie-t'il qu'il n'est pas possible d'associer les deux formats à une seule image ?

La problématique est, je l'imagine, nouvelle, car auparavant, il suffisait d'installer un lecteur flash unique qui passait partout via le plugin qui va bien. Cependant la demande qui m'est faite pour ce site web est d'utiliser au maximum les possibilités de la balise video, et donc si possible de ne pas passer directement par le flash. D'où la nécessité, pour l'instant, de mettre plusieurs sources vidéo, mozilla, google apple et microsoft n'étant toujours pas d'accord sur le format à adopter (bien que webm semble en bonne voie).

Je continue à réfléchir à une alternative, qui donnerait au moins "l'ilusion" d'avoir un lien unique pour obtenir la vidéo, quelque soit le navigateur. Bien que sous le capot, la video effectivement lue change en fonction du navigateur et de sa compatibilité.
Sujet clos
Aller à