changer les 3 sources de la balise video html5
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:
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
