changer les 3 sources de la balise video html5

[chris.lechat]

Bonjour,

comme vous le savez la balise vidéo html5 permet de mettre plusieurs sources à la suite avec différents formats de vidéos pour plus de compatibilité avec les navigateurs web. La balise video s’arrêtera sur la source que le navigateur prend en charge.

ça fonctionne très bien mais par dessus cela j'aimerais trouver une solution pour changer les 3 sources en fonction de la résolution d'écran de l'utilisateur histoire de leur charger une vidéo relative à la résolution. j'ai essayé cela entre body de ma page mais cela ne fonctionne pas.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<SCRIPT language="JavaScript">
			<!--
			if ((screen.width>=1600))
			{
			        var vdo1 = document.getElementById('vsrc1');
				var vdo2 = document.getElementById('vsrc2');
				var vdo3 = document.getElementById('vsrc3');
 
                vdo1.src = "http://www.lapetitehistoiredusoir.com/html5/video/escargot_et_d_une_salade_video.mp4" ;
                vdo2.src = "http://www.lapetitehistoiredusoir.com/html5/video/escargot_et_d_une_salade_video.webm" ;
		        vdo3.src = "http://www.lapetitehistoiredusoir.com/html5/video/escargot_et_d_une_salade_video.ogv" ;	 
 
			}
			else
			{
			  alert('reso<1600');
			}
			//-->
         </SCRIPT>

Code html :

1
2
3
4
5
6
7
8
9
10
11
	   <p class="video_histoire">
 
 
		 <video id="myvideo" controls="controls">
			     <source id="vsrc1" src=""  type="video/mp4"/>
			     <source id="vsrc2" src="" type="video/webm" />
			     <source id="vsrc3" src="" type="video/ogg" />
			 Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
		</video>
 
	 </p>

PS: peux t'on manipuler un ID d'une balise html en javascript avant qu'il n'apparaisse dans la page html comme je l'ai fait.

je cherche une solution simple pour un gars un peu simple. Merci d'avance

[clovis802]

Tu les separe ou par php?

[10903513]

Pour faire en sorte d'utiliser les id de la page html à son chargement tu peux utiliser : window.onload
et faire suivre une fonction selon ce que tu veux que le code fasse.

Ensuite pour modifier les sources selon la résolution d'écran de l'utilisateur, j'aurai pensé à faire des conditions avec toutes les résolutions que tu veux prendre en compte : 1600x1200, 1280x1024, 1024x768 etc. avec des screen.width et screen.height.

Je met un exemple de script qui gère le changement de fond d'écran en fonction de la résolution de l'écran que j'ai sous la main, pour que tu vois le principe avec window.onload, tu pourras adapter :
dans ce cas précis je pose des condition pour la résolution et change le nom de l'image en fonction de la résolution.

Code :

1
2
3
4
5
6
7
8
9
 
window.onload=function() {
   var sw = screen.width;
  var img = "800_600";
  if (sw>=1024) img = "1024_768";
  if (sw>=1280) img = "1280_1024";
document.body.style.background="url(images/fond_automne_"+img+".jpg) no-repeat center center"
}
</script>

Par contre fais attention en utilisant la résolution d'écran, si l'internaute surfe avec la fenêtre réduite, ça va pas être top, tu peux utiliser la taille de la fenêtre à la place.

J'espère que ça t'aideras un peu.

[chris.lechat]

Merci pour votre aide je vais essayer avec ça.