twitter-bootstrap - video bootstrap 3

Bootstrap 3-Sensible mp4-video

Question

Traté de encontrar una buena solución en el sitio de arranque pero todavía no recibí una respuesta. Creo que no puedo ser el único que lucha con esto, pero no pude encontrar nada que me ayudara.

Intento incrustar un video mp4 en mi sitio web. El problema es que si utilizo una etiqueta iframe no puedo usar la reproducción automática y el bucle. Por eso me gustaría resolverlo con una etiqueta de video (u otra cosa que admita autoplay y loop). Después de eso intenté hacer que mi video respondiera con una etiqueta de objeto pero esto no funcionó. Aunque lo dejé en mi código (para mostrarte) que puedes ver a continuación:

<div align="center">
<object class="embed-responsive-item">
<video autoplay loop >
<source src="file.mp4" />
</video>
</object>
</div>

Espero que cualquiera de ustedes me pueda ayudar a solucionar esto.

Answer 1

Esto funcionó para mí:

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

Answer 2

Según tengo entendido, desea insertar un video en su sitio que:

• Es receptivo
• Permite tanto la reproducción automática como el bucle
• Utiliza Bootstrap

Esta demostración aquí hace precisamente eso. Debe colocar otra clase de inserción fuera de la etiqueta object / embed / iframe según las instrucciones aquí , pero también puede usar una etiqueta de video en lugar de la etiqueta de objeto aunque no esté especificada.

<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>

Answer 3

Simplemente agregue class = "img-responsive" a la etiqueta de video. Estoy haciendo esto en un proyecto actual, y funciona. No necesita envolverse en nada.

<video class="img-responsive" src="file.mp4" autoplay loop/>

Answer 4

Sugerencia para VÍDEOS MÚLTIPLES en una página: Hace poco resolví un problema sin reproducción de mp4 en Chrome o Firefox (jugó bien en IE) en una página con 16 videos en modales (bootstrap 3) después de descubrir que las velocidades de fotogramas de todos los videos deben ser idéntico. Tenía 6 videos a 25 fps y 12 a 29.97 fps ... después de renderizar todas las versiones a 25 fps, todo funciona sin problemas en todos los navegadores.

Answer 5

usar ese código te dará un reproductor de video receptivo con control 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>