Bootstrap 3 - Responsive mp4-vidéo

J'ai essayé de trouver une bonne solution sur le bootstrap site, mais je n'ai pas eu de réponse à ce moment. Je pense que je ne peux pas être le seul aux prises avec cela, mais je ne pouvais pas trouver quelque chose qui m'a aidé.

Je suis en train d'intégrer une mp4-vidéo sur mon site. Le problème, c'est que si j'utilise une iframe-tag je ne peux pas utiliser l'exécution automatique et boucle.
À cause de cela je tiens à le résoudre avec une balise vidéo (ou autre chose qui prend en charge la lecture automatique et boucle). Après que j'ai essayé de faire ma vidéo réactif avec un objet-balise, mais cela n'a pas fonctionné. Même si je le laisse 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 quelqu'un de vous peut m'aider à résoudre ce problème.

  • Fichier un bug prochaine fois! Ce sera maintenant le fixe en v3.2.1.
  • Je vais faire la prochaine fois.
InformationsquelleAutor BRsmover | 2014-09-25
  1. 116

    C'est ma compréhension que vous souhaitez intégrer une vidéo sur votre site:

    • Est sensible
    • Permet à la fois de lecture automatique et boucle
    • Utilise Bootstrap

    Ce Démo Ici est juste que. Vous devez placer un autre incorporer classe en dehors de l'objet/embed/balise iframe comme par le les instructions ici - mais vous êtes également en mesure d'utiliser une balise vidéo au lieu de la balise object, même si il n'est pas spécifié. 

    <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>
    • C'est exactement ce que je cherchais! Merci beaucoup! Cela m'a vraiment aidé!
    • Cela ne fonctionne pas sur IE8,9 et les navigateurs Safari.
    • Testé sur ie9 et safari. Les deux fonctionnent parfaitement, de sorte que vous avez quelque chose d'autre se passe là-bas. Concernant ie8 - il ne prend pas en charge le <video> tag, et il y a aussi problèmes avec l'aide de Bootstrap3 dans ie8 spécifiquement avec les media queries. Veuillez lire le lien pour obtenir plus d'informations.
    • Elle couvre l'ensemble de la page et qu'il est sensible, mais je veux une petite hauteur & largeur. comment dois-je faire??
    • Il suffit de changer le max-height et max-width de la div parent de la vidéo. Voir un démo ici.
    InformationsquelleAutor Schybo
  2. 15

    Simplement ajouter class="img-responsive" pour la balise vidéo. Je fais cela sur un projet en cours, et il fonctionne. Il n'a pas besoin d'être enveloppé dans du n'importe quoi.

    <video class="img-responsive" src="file.mp4" autoplay loop/>
    • la classe "img-responsive" est utilisé pour les images et pas pour les vidéos
    • Il a travaillé pour moi. Merci!!!!
    InformationsquelleAutor Allan Clayton
  3. 2

    à l'aide de ce code wil vous donner un réactif lecteur vidéo avec le plein contrôle

    <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>
    • en utilisant ce code wil vous donner réactif lecteur vidéo avec plein controloers
    • la question était sur l'incorporation de HTML5 vidéo mp4 et pas une vidéo de youtube,
    InformationsquelleAutor Zama Sparlay
  4. 2

    Cela a fonctionné pour moi:

    <video src="file.mp4" controls style="max-width:100%; height:auto"></video>

    • Merci!, cela fonctionne pour moi
    InformationsquelleAutor Hein van Dyke
  5. 0

    Astuce pour de MULTIPLES VIDÉOS sur une page: récemment, j'ai résolu un problème avec aucun mp4 lecture de Chrome ou de Firefox (joué fine dans IE) dans une page avec 16 vidéos en les auxiliaires modaux (bootstrap 3) après avoir découvert le taux de trame de toutes les vidéos doivent être identiques. J'ai eu 6 vidéos à 25fps et 12 à 29,97 i /s... après avoir rendu tout à 25fps versions, tout se passe en douceur sur tous les navigateurs.

    InformationsquelleAutor T Gorle