18008 sujets

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

Insertion vidéo HTML5 Autoplay

Bonjour !
J'ai un petit problème pour intégrer une vidéo sur mon site en utilisant du code HTML.
Mon souci c'est que la vidéo ne s'autoplay pas sur un navigateur de taille normal mais uniquement sur mon écran 17 pouces... et je sais pas pourquoi...

Voici le code que j'utilise :

<video width="100%" height="100% autoplay loop>
<source src="http://interbde.com/wp-content/header_final.mp4" type="video/mp4" />
<source src="http://interbde.com/wp-content/header_final.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Si quelqu'un a une piste je suis preneur... voici mon site web ou j'utilise ce code comme header : http://zombie17.businesscatalyst.com/index.html

Vous verrez que le header s’anime en fonction de la taille de votre navigateur

Merci pour vos conseils.
Modifié par flea07 (03 May 2016 - 20:02)
A priori il manque un guillemet pour fermer l'attribut height, non ?

PS: autoplay est une super mauvaise idée en terme d'expérience utilisateur et d'accessibilité, un bon vieux bouton « Lecture » est bien plus intéressant pour tout le monde. Tu trouveras quelques liens pertinents dans cette documentation. Grosso modo si tu mets en place l'autoplay, il faut que ça puisse être arrété très facilement par l'utilisateur Smiley smile
Merci pour ta réponse !
En fait j'utilise l'autoplay pour ma vidéo HEADER, simplement pour faire une animation mais elle reste en image fixe sur des navigateurs de plus petite taille et je ne sais pas pourquoi... Pourtant sur d'autres sites ça marche très bien.
Mon site : http://zombie17.businesscatalyst.com/index.html en fonction de la taille du browser l'autoplay ne marche pas...

Mon code corrigé grâce à toi : 

<video width="100%" height="100%" autoplay loop>
<source src="http://interbde.com/wp-content/header_final.mp4" type="video/mp4" />
<source src="http://interbde.com/wp-content/header_final.webm" type="video/webm" />
Your browser does not support the video tag.
</video>


Hélas sans succès...
Alors aucune idée du pourquoi, mais je crois que ton fichier .mp4 ne fonctionne pas : sous Mac, la vidéo se lance bien sous Firefox mais pas sous Chrome. Quand j'accède aux fichiers directement :
— le mp4
— le webm

Sous Chrome je peux lire le fichier webm mais pas le mp4, et comme ce dernier est appelé en premier et supposé fonctionner sous Chrome, il s'arrête à ce fichier.

Il est possible que l'encodage utilisé gêne Chrome, mais je n'ai absolument aucune idée de comment / pourquoi. Ma seule suggestion est du coup de mettre le webm avant le mp4, au moins pour tester.

Au-delà de ce simple test, je ne saurais pas trop quoi faire de plus. Tu peux tester aussi avec l'attribut controls, pour voir si avec l'interface du lecteur tu peux lancer ou non la vidéo (si oui, ce n'est pas un problème d'encodage).

Bon courage !
Merci ! je vais essayer de chercher pour l'encodage, ,merci d'avoir passer du temps a me répondre.
Bonne journée
Sujet clos
Aller à