Discussion :

[chtrousselle]

Bonjour,
je souhaiterais modifier la valeur de l'attribut src d'une video en cliquant sur un bouton.
Les affichage "alert" me montre bien que la l'attribut src a été modifié, mais la modification n''est pas prise en compte dans mon HTML

Voici mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<video id="ma_video" class="video" controls preload="none" width="640" height="264" data-setup="{}" >
 
    <source id='source' src='/video.mp4' type='video/mp4'  />
</video>
<input type="submit" id="bouton" value="CHANGER SRC"></input>

Code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var source = document.getElementById('source');
var src = source.getAttribute('src');
 
 bouton.onclick = function() { 
 	alert(source.src);
	source.removeAttribute('src');
    source.setAttribute('src', '/nouvelle_video.mp4');
	alert(source.src);
}
</script>

Avez-vous une solution ?
Merci d'avance
Cordialement

[MaitreKaio]

Voici ce que dit le W3C sur le sujet:

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unncessarily complicated approach.

Autrement dit, il te faut modifier l'attribut src de l'élément video, pas de l'élément source. Comme tu ne sauras pas forcément quel format choisir (quoique je vois que tu n'as mis qu'une source dans ton code), il faudra d'abord tester en faisant des appels à canPlayType() pour choisir un format probablement lisible par le navigateur.

[chtrousselle]

Merci pour votre réponse !
J'ai trouvé ce qu'il me fallait !

Cordialement

[chtrousselle]

Je reviens vers vous car j'ai un nouveau problème...
Je veux maintenant changer la source d'une video en cliquant sur une image.
Pour cela je récupère une variable $video provenant d'un input, je stocke cette variable dans "alt" puis je la passe en parametre de ma fonction javascript pour changer la source de la video...sans succès. Si je stocke ma variable dans value, ca ne marche pas non plus. Comment faire sachant que je récupère bien les bons liens, mais ma vidéo ne se lance pas...
Voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 <video id="video"  controls preload="none" width="640" height="264" 
src='source.mp4' type='video/mp4' ></video>
 
<input name="video" type="file" multiple="multiple"/>
 
<img src="lecture.png" alt="'.$video["titre_video"].'" onclick=Modif_SRC(this.alt) style="cursor:hand"></img>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
 
var video = document.getElementById('video');
var src = video.getAttribute('src'); 
 
function Modif_SRC(src_video) { 
alert(src);
alert(src_video); 
    video.setAttribute('src', 'src_video'); 
	video.setAttribute('autoplay', ''); 
 
 
}
</script>

Cordialement

[MaitreKaio]

Avant toutes choses, il est de bon aloi de poser toute nouvelle question dans une nouvelle discussion, et éventuellement de clore l'ancienne discussion en la marquant 'résolue".
En ce qui concerne ta nouvelle question, je reviens à ce que j'ai dis précédemment mais que je ne vois pas appliqué dans ton code: si tu veux changer la source d'une vidéo à la volée, tu ne vas pas changer les éléments <source> que tu as éventuellement défini à l'intérieur, mais tu vas positionner directement l'attribut src de l'élément vidéo. Un exemple (qui fonctionne):
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<video id="myvideo" controls>
    <source src='http://download.blender.org/peach/trailer/trailer_400p.ogg'/>
</video>
<button id="mybutton">Changer de source</button>

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var video = document.getElementById("myvideo");
var button = document.getElementById("mybutton");
 
button.addEventListener("click", clickButtonHandler, false);
video.addEventListener("loadedmetadata", loadedMetaDataHandler, false);
 
function clickButtonHandler() {
    video.src = "http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv";
}
 
function loadedMetaDataHandler() {
    console.log(video.currentSrc);
}

[chtrousselle]

Merci beaucoup !

[Invité]

bonjour

il est tout a fait possible d'utiliser le tag source il faut juste utiliser l'attribut load() afin de recharger la video

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<video id="ma_video" class="video" controls preload="none" width="640" height="264" data-setup="{}" >
 
<source id='source' src='/video.mp4' type='video/mp4'  />
<source id='source' src='/video.ogg' type='video/ogg'  />
</video>
<input type="submit" id="bouton" value="CHANGER SRC"></input>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var video = document.getElementById("myvideo");
var elemensource=video.getElementsByTagName('source');
 
elemensource[0].setAttribute('src',titre+'.mp4');
elemensource[1].setAttribute('src',titre+'.ogg');
 
video.load();
video.play()

[chtrousselle]

Merci ! Mais, si mon titre de ma video est une variable récupéré par un formulaire comment faire ? et comment ne pas relancer la page au chargement de la vidéo ?

[Invité]

il faut faire de l'ajax