wake-up-neo.com

Bootstrap 3 - Responsives mp4-Video

Ich habe versucht, auf der Bootstrap-Site eine gute Lösung zu finden, aber ich habe noch keine Antwort darauf erhalten. Ich denke, ich kann nicht der Einzige sein, der damit zu kämpfen hat, aber ich konnte nichts finden, was mir half.

Ich versuche, ein mp4-Video auf meiner Website einzubetten. Das Problem ist, dass ich, wenn ich ein iframe-Tag verwende, kein Autoplay und keine Schleife verwenden kann. Aus diesem Grund möchte ich es mit einem Video-Tag (oder etwas anderem, das Autoplay und Loop unterstützt) lösen. Danach habe ich versucht, mein Video mit einem Objekt-Tag ansprechbar zu machen, aber das hat nicht funktioniert. Obwohl ich es in meinen Code eingegeben habe (um es Ihnen zu zeigen), was Sie unten sehen können:

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

Ich hoffe, jemand von Ihnen kann mir helfen, das Problem zu beheben. 

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

Nach meinem Verständnis möchten Sie ein Video in Ihre Website einbetten, das:

  • Ist ansprechbar 
  • Erlaubt sowohl Autoplay als auch Loop
  • Verwendet Bootstrap 

Dieses Demo Here macht genau das. Sie müssen eine andere Einbettungsklasse außerhalb des object/embed/iframe-Tags gemäß den Anweisungen hier einfügen - Sie können jedoch auch ein video-Tag anstelle des object-Tags verwenden, obwohl es nicht angegeben ist . 

<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

Fügen Sie dem video-Tag einfach class = "img-responsive" hinzu. Ich mache dies bei einem aktuellen Projekt und es funktioniert. Es muss nichts eingepackt sein.

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

wenn Sie diesen Code verwenden, erhalten Sie einen reaktionsfähigen Videoplayer mit voller Kontrolle

<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

Das hat für mich funktioniert:

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

2
Hein van Dyke

Tipp für MULTIPLE VIDEOS auf einer Seite: Ich habe vor kurzem ein Problem ohne mp4-Wiedergabe in Chrome oder Firefox (gut gespielt im IE) in einer Seite mit 16 Videos in Modals (Bootstrap 3) gelöst, nachdem die Bildraten aller Videos ermittelt wurden identisch. Ich hatte 6 Videos bei 25fps und 12 bei 29.97fps ... nachdem alle 25fps-Versionen gerendert wurden, läuft alles reibungslos in allen Browsern.

0
T Gorle