web-dev-qa-db-fra.com

Bootstrap 3 - Réactif mp4-video

J'ai essayé de trouver une bonne solution sur le site d'amorçage, mais je n'ai pas encore obtenu de réponse. Je pense que je ne peux pas être le seul à lutter contre cela, mais je n'ai rien trouvé qui puisse m'aider.

J'essaie d'intégrer une vidéo MP4 sur mon site Web. Le problème est que si j'utilise un iframe-tag, je ne peux pas utiliser autoplay ni loop. Pour cette raison, j'aimerais résoudre le problème avec une balise video (ou autre chose qui prend en charge la lecture automatique et la boucle). Après cela, j'ai essayé de rendre ma vidéo sensible avec un objet-tag 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 n'importe qui d'entre vous pourra m'aider à résoudre ce problème. 

twitter-bootstrapvideotwitter-bootstrap-3responsive-designmp4
50
BRsmover

Si je comprends bien, vous souhaitez intégrer une vidéo sur votre site qui:

  • Est sensible 
  • Permet à la fois l'autoplay et la boucle
  • Utilise Bootstrap 

C'est ce que fait Demo Here . 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 video 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>
111
Schybo

Ajoutez simplement class = "img-responsive" à la balise video. Je le fais 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/>
14
Allan Clayton

en utilisant ce code, vous obtiendrez 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>
2
Zama Sparlay

Cela a fonctionné pour moi:

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

2
Hein van Dyke

Astuce pour PLUSIEURS VIDÉOS sur une page: j'ai récemment résolu un problème sans lecture de mp4 dans Chrome ou Firefox (très bien lu dans IE) dans une page contenant 16 vidéos en modaux (bootstrap 3) après avoir découvert identique. J'ai eu 6 vidéos à 25fps et 12 à 29,97fps ... après le rendu de toutes les versions à 25fps, tout se passe bien dans tous les navigateurs.

0
T Gorle