Bootstrap 3 - Responsive mp4-video - Biblioteca eccellente

Ho provato a trovare una buona soluzione sul sito di bootstrap ma non ho ancora ricevuto una risposta. Penso di non poter essere l'unico a lottare con questo, ma non sono riuscito a trovare nulla che mi aiutasse.Bootstrap 3 - Responsive mp4-video

Sto provando a incorporare un mp4-video sul mio sito web. Il problema è che, se uso un tag iframe, non posso usare autoplay e loop. Per questo mi piacerebbe risolverlo con un tag video (o qualcos'altro che supporta l'autoplay e il loop). Successivamente ho provato a rendere il mio video reattivo con un tag object ma questo non ha funzionato. Anche se ho lasciato nel mio codice (visualizzare), che potete vedere qui sotto:

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

spero qualcuno di voi può aiutarmi a risolvere questo problema.

fonte

2014-09-25 BRsmover

un bug la prossima volta! Questo sarà ora [fissato in v3.2.1.] (Https://github.com/twbs/bootstrap/issues/14687) – cvrebert

@cvrebert Lo farò la prossima volta. – BRsmover

100

E 'la mia comprensione che si desidera incorporare un video sul tuo sito che:

risponde
consente sia la riproduzione automatica e ciclo
Usi Bootstrap

Questo Demo Here fa proprio questo. Devi posizionare un'altra classe embed al di fuori del tag object/embed/iframe come per lo instructions here, ma puoi anche utilizzare un tag video al posto del tag dell'oggetto anche se non è specificato.

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

fonte

2014-09-25 14:19:22 Schybo

Questo è esattamente quello che stavo cercando! Grazie mille! Questo mi ha davvero aiutato! – BRsmover

Questo non funziona su IE8,9 e browser Safari. –

Testato su ie9 e safari. Entrambi funzionano perfettamente in modo da avere qualcos'altro in corso lì. Riguardo a ie8 - [non supporta] (http://caniuse.com/#feat=video) il tag

usando quel codice wil darvi un lettore video reattiva con il pieno controllo

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

fonte

2016-03-06 10:38:21

utilizzando quel codice fornirai un riproduttore video reattivo con tutti i controloer –

la domanda riguardava l'incorporamento di video mp4 HTML5 e non un video di YouTube –

Basta aggiungere class = "img-sensibile" al tag video. Lo sto facendo su un progetto attuale, e funziona. Non ha bisogno di essere avvolto in nulla.

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

fonte

2016-12-14 20:00:04

la classe "img-responsive" è usata per le immagini e non per i video –

Suggerimento per i video multipli su una pagina: Recentemente ho risolto un problema senza la riproduzione mp4 in Chrome o Firefox (interpretato bene in IE) in una pagina con 16 video in modali (bootstrap 3) dopo aver scoperto il telaio le percentuali di tutti i video devono essere identiche. Avevo 6 video a 25 fps e 12 a 29,97 fps ... dopo aver eseguito il rendering di tutte le versioni a 25 fps, tutto scorre liscio su tutti i browser.

fonte

2017-09-15 14:44:57

Questo ha funzionato per me:

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

fonte

2017-12-11 17:32:34

Bootstrap 3 - Responsive mp4-video

risposta

Problemi correlati