Bootstrap 3-Responsive mp4-vidéo
J'ai essayé de trouver une bonne solution sur le site bootstrap mais je n'ai pas encore eu de réponse à cela. Je pense que je ne peux pas être le seul à lutter avec cela, mais je n'ai rien trouvé qui m'a aidé.
J'essaie d'intégrer une vidéo mp4 sur mon site web. Le problème est que si j'utilise une balise iframe, Je ne peux pas utiliser autoplay et loop. Pour cette raison, je voudrais le résoudre avec une balise vidéo (ou autre chose qui prend en charge la lecture automatique et la boucle). Après cela j'ai essayé de rendre ma vidéo réactive avec un objet-balise, mais cela n'a pas fonctionné. Même si je l'ai laissé dans mon code (pour vous montrer) que vous pouvez voir ci-dessous:
<div align="center">
<object class="embed-responsive-item">
<video autoplay loop >
<source src="file.mp4" />
</video>
</object>
</div>
J'espère que n'importe qui d'entre vous peut m'aider à résoudre ce problème.
5 réponses
Il est à ma connaissance que vous souhaitez intégrer une vidéo sur votre site qui:
- est réactif
- permet à la fois la lecture automatique et la boucle
- Utilise Bootstrap
Cette démo ici fait exactement cela. Vous devez placer une autre classe embed en dehors de la balise object/embed/iframe selon les instructions ici - mais vous pouvez également utiliser une balise vidéo au lieu de la balise object même si elle n'est pas spécifiée.
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
Ajoutez simplement class = "img-responsive" à la balise vidéo. Je fais cela sur un projet en cours, et cela fonctionne. Il n'a pas besoin d'être enveloppé dans quoi que ce soit.
<video class="img-responsive" src="file.mp4" autoplay loop/>
L'utilisation de ce code vous donnera un lecteur vidéo réactif avec un contrôle total
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="640" height="480" src="https://www.youtube-nocookie.com/embed/Lw_e0vF1IB4" frameborder="0" allowfullscreen></iframe>
</div>
Astuce pour plusieurs vidéos sur une page: j'ai récemment résolu un problème sans lecture mp4 dans Chrome ou Firefox (bien joué dans IE) dans une page avec 16 vidéos en modals (bootstrap 3) Après avoir découvert que les cadences de toutes les vidéos doivent être identiques. J'ai eu 6 vidéos à 25fps et 12 à 29,97 ips... après avoir rendu toutes les versions 25fps, tout fonctionne en douceur sur tous les navigateurs.
Cela a fonctionné pour moi:
<video src="file.mp4" controls style="max-width:100%; height:auto"></video>