18041 sujets

Questions générales et questions de débutants

[Résolu] Charger une vidéo sur desktop mais pas sur Mobile

Bonjour,

J'aimerai charger une vidéo sur desktop mais pas sur mobile.

voici mon code initial : 

 
<div class="video_wrapper desktop"><div class="embed-container"><iframe src="" data-src="https://player.vimeo.com/video/mavideo?background=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></div>


J'ai également un Script pour gérer un vidDefer :

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>


Je pensai utiliser une balise vidéo, mais je n'arrive pas.

Ma dernière version : 

	<div class="video_wrapper desktop">
		<div class="embed-container">
		<video>
			<source media ="(min-width: 992px)" src="https://player.vimeo.com/video/maviedo?background=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>>
			<img src="">
		</video>
		</div>


La vidéo est chargée dans le code en desktop et mobile mais ne s'affiche pas en front.

Auriez-vous une piste s'il vous plait?

Merci par avance pour votre aide,
Modifié par Marie35 (31 Jul 2019 - 11:17)
Administrateur
Hello Marie Smiley smile

Je ne suis pas sûr que cela soit aussi facile que pour les images en effet.

Je tenterais bien une détection avec matchMedia() de ce genre : 


  <div id="player"></div> <!-- ici le conteneur de la vidéo-->

  <script>
  if (window.matchMedia("(min-width:992px)").matches) {
    document.getElementById('player').innerHTML = '
   <video>
      <source src="..." frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
   </video>';
  }
  </script>
hello Raphael,

Merci pour ta réponse rapide,

Alors quand j'ai ajouté ton script j'ai eu cette erreur :
https://www.screencast.com/t/zFMmzvTWjMHX

Du coup mon dev à modifié ton code par : 

<script>
if (window.matchMedia("(min-width:992px)").matches) {
var url = "https://player.vimeo.com/video/347544541?background=1";
document.getElementById('player').innerHTML = "<video><source src="+url+" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></video>";
}
</script>


Et maintenant j'ai cette erreur :
https://www.screencast.com/t/FqMvnUHSNops

et là on on ne voit pas de solution...


EDIT : Sur mobile ça s'affiche bien, sans vidéo
Modifié par Marie35 (31 Jul 2019 - 12:26)
Administrateur
Ce n'est vraiment pas mon domaine de compétence, mais si j'ai bien compris ce que dit MDN (https://developer.mozilla.org/fr/docs/Web/HTML/Element/Video), il faudrait que tu ajoutes et précises la valeur de l'attribut "crossorigin".

Je ne pourrais pas t'aider plus, j'espère que d'autres ici le pourront.
Merci quand même!

Sinon mon dev à eu une idée :
Remettre mon eframe et dans ton script mettre un remove.

Qu'en penses-tu?
Modifié par Marie35 (31 Jul 2019 - 13:14)
Bonjour à tous,

Finalement nous avons fini par trouver la solution.

On a gardé l'iframe et ajouté un script remove :


<div class="video_wrapper desktop">
<div class="embed-container" id="parent">
<iframe id = "children"src="" data-src="https://player.vimeo.com/video/347544541?background=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>


<script>
if (window.matchMedia("(max-width:991px)").matches) {
var iframe = document.getElementById('children');
var parent = document.getElementById('parent');
console.log(parent);
parent.removeChild(iframe);
console.log(iframe);
}	
</script>


Si ça peut aider quelqu'un Smiley smile
Modifié par Marie35 (02 Aug 2019 - 08:49)
Meilleure solution
Sujet clos
Aller à