Discussion :

[fulachan2]

Salut à tous,
après avoir lu la discussion getElementsByClassName ne marche pas il semblerait que je rencontre le même problème.

Je souhaitais faire des liens sur des ancres permettant d'accéder à une video et de lancer cette video via l'attribut autoplay.

J'ai donc pensé charger au lancement de ma page des écouteurs d'évènement sur toutes les balises video en faisant passer autoplay de false à true sur le lien cliqué.
donc dans mon script séparé JS, j'ai utilisé la fonction getElementByTagName('video') en vu de récupérer les valeurs de la collection via une boucle FOR
J'ai testé l'accès à ma fonction anonyme avec un petit alert("youpi"); ---> ca marche donc je fais un test simple sur des balise simple avec des attributs existant juste pour mon test et la RIEN.

Code :

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

1
2
3
window.onload = function(){
	alert(document.getElementByClassName("div")[0].hasAttribute("id"));
}

J'ai un peu tout testé getAttribute("class"), etc... du moins tous ce qui est censé me récupéré qqchose.

L'idée finale étant de faire:

Code :

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

1
2
3
4
5
6
7
8
9
window.onload = function(){
	var balisevideo = document.getElementByTagName("video");
 
	for (var i = 0; var long = balisevideo.length; i <= long; i++) {
		/* ma balise <video> ayant au préalable l'attribut autoplay=false */
		balisevideo[i].addEventListener('focus',function(){ this.setAttribute('autoplay')=true; });
 
	}
}

[NoSmoking]

Bonjour,
au moins 2 choses
• 1st

for (var i = 0; var long = balisevideo.length; i <= long; i++)

il te faut revoir l'utilisation des boucles

• 2nd
Utilises la méthode querySelectorall("video") pour récupérer tous tes éléments <video>.

[fulachan2]

Merci pour les conseils autant pour moi.

Code :

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

for (var i = 0; i <= balisevideo.length; i++)

Par contre je sui sassez perplexe car je ne comprends pas ce qui peut différencié les 2 fonctions a part que sur querySelector, je peux mettre aussi bien des noms de class, d'id ou de balise, cool.

Entre temps j'ai découvert une erreur dans mon code, pas de S à element de getElementsByTagName, j'ai réécris ceci et au bout de qq essai, ca marche donc je continue (peut être un probleme de cache).

Code :

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

1
2
3
4
window.onload = function(){
	var vid = document.getElementsByTagName('video');
	alert((vid[0].hasAttribute('controls')));
}

Merci encore pour votre aide et dsl pour le message mal posté.

[NoSmoking]

qu'est ce qui te bloque ?

[fulachan2]

Je bloque sur la suite mais je vais chercher un peu.

Le but est de cliqué sur un lien et d'aller sur l'ancre de la page ou se trouve ma vidéo et d'envoyer une lecture automatique (autoplay).

Pour ce faire:

1. Je pose des addEventListener() sur mes liens MAIS qui doit récupérer l'ID de mon lien via un getAttribute('id').
2. L'ID récupérer me servira à poser une condition(if) si la valeur de l'ID égal la valeur du NAME de ma <video>
enfin, si ca rentre dans le if, je passe le <param> autoplay de false à true.

Je doute un peu sur la façon de faire.


Pour mes interrogations, juste une question pour mieux comprendre la différence entre les 2 fonctions querySelectorAll() et getElementsByTagName().


mon code actuel, je suis arrivé à récupérer la valeur de mon <param>

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
window.onload = function(){
	var vid = document.querySelectorAll('.liendate');
 
for (var i = 0; i <= vid.length; i++) {
 
 
	var nomancre  = vid[i].getAttribute('href');
	vid[i].addEventListener('click',function(){
	var idlien = nomancre.substring(1);
	alert(idlien);
 
 
 
 
	});
 
 
 
	var niv1 = document.getElementById(idlien).childNodes;
	var niv2 = niv1[1].querySelectorAll('param');
 
 
 
 
	alert(niv2[0].getAttribute('value'));
 
 
 
}
 
 
}

[NoSmoking]

Pour mes interrogations, juste une question pour mieux comprendre la différence entre les 2 fonctions querySelectorAll() et getElementsByTagName().

Le mieux reste de lire la documentation, sur MDN par exemple

• Document.querySelectorAll()
• element.getElementsByTagName

Pour le reste, pas bien compris, pourrait-on avoir un exemple du code HTML ?

[fulachan2]

Pour faire simple j'appose un écouteur d'évènement 'click' sur tous mes liens hypertexte qui, au clic, passe la balise

Code :

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

<param name="autoplay" value="false">

à

Code :

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

<param name="autoplay" value="true">

Pour lancer la lecture de la vidéo qui doit donc avoir un lien entre le nom de l'ancre et l'ID de ma balise video d'ou:

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
16
17
18
 
window.onload = function(){
	var vid = document.querySelectorAll('.liendate');
 
for (var i = 0; i <= vid.length; i++) {
 
 
	var nomancre  = vid[i].getAttribute('href');
	vid[i].addEventListener('click',function(){
	var idlien = nomancre.substring(1);
 
	});
 
	var niv1 = document.getElementById(idlien).childNodes;
	var niv2 = niv1[1].querySelectorAll('param');
 
 
alert(niv2[0].setAttribute('value'));

J'avoue que c'est un peu capilotracté disons que je n'est pas trouvé d'autre solution pour me balader dans les noeuds (node).
----------------------------
Voici le code complet.

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
16
 
<div class="videop" id="1974">
			<video autobuffer controls=true poster="images/1974.png">
				<source src="media/video/ogv/02_nageur_everest.ogv">
				<source src="media/video/webm/02_nageur_everest.webm">
				<source src="media/video/mp4/02_nageur_everest.mp4">
				<object type="video/ogg" data="media/video/ogv/02_nageur_everest.ogv">
				<param name="src" value="/media/video/ogv/02_nageur_everest.ogv">
				<param name="autoplay" value="false">
				<param name="autoStart" value="0">
				</object>
			</video>
			<figure>
					<figcaption><strong>1974</strong> - Nageur de l'Everest'</figcaption>	
			</figure>
		</div>