45

Bootstrap sitesinde iyi bir çözüm bulmaya çalıştım ama buna henüz bir cevap alamadım. Ben bununla uğraşan tek kişi olamayacağımı düşünüyorum, ama bana yardımcı olan hiçbir şey bulamadım.Bootstrap 3 - Duyarlı mp4-video

Web sitemde bir mp4-video yerleştirmeye çalışıyorum. Sorun şu ki, iframe etiketini kullanırsam otomatik oynatmayı ve döngüyü kullanamıyorum. Bu yüzden onu bir video etiketiyle (veya otomatik oynatmayı ve döngüyü destekleyen başka bir şeyle) çözmek istiyorum. Bundan sonra videomu bir nesne etiketiyle yanıtlamaya çalıştım ama bu işe yaramadı. Benim kodunda izin rağmen aşağıda görebileceğiniz (göstermek):

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

Senden kimse bana bu düzeltmeyi yardımcı olabilir umuyoruz.

  • autoplay ve döngü hem

Bu Demo Here Bootstrap kullanır verir duyarlı mı:

+0

Dosya bir hata dahaki sefere! Bu şimdi [v3.2.1'de sabitlenecektir.] (Https://github.com/twbs/bootstrap/issues/14687) – cvrebert

+0

@cvrebert Bir dahaki sefere yapacağım. – BRsmover

cevap

100

O sitenizde bir video gömmek istiyorum benim anlayış olduğunu sadece bunu yapar. instructions here uyarınca object/embed/iframe etiketinin dışında başka bir embed sınıfı yerleştirmelisiniz - ancak belirtilmemiş olsa bile nesne etiketinin yerine bir video etiketi kullanabilirsiniz.

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

Tam olarak aradığım şey bu! Çok teşekkür ederim! Bu gerçekten bana yardımcı oldu! – BRsmover

+0

Bu, IE8,9 ve Safari tarayıcılarında çalışmıyor. –

+1

ie9 ve safari üzerinde test edilmiştir. Her ikisi de mükemmel çalışıyor, böylece başka bir şeyiniz oluyor. Ie8 ile ilgili - bu [desteklemiyor] (http://caniuse.com/#feat=video)

0

bu kodu kullanarak size tam kontrol duyarlı bir video oynatıcı vermek wil

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

bu kodu kullanarak tam controloers –

+0

duyarlı video oynatıcı vermek soru bir video eklemek değil ve youtube video –

6

Basitçe class = "img-duyarlı" video etiketine ekleyin. Bunu mevcut bir projede yapıyorum ve işe yarıyor. Hiçbir şeye sarılmasına gerek yok. Bir sayfada birden fazla video için

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

sınıf "img-responsive" videoları için kullanılan ve videolar için değil –

0

İpucu: Geçenlerde çerçeveyi keşfettikten sonra kipliklerin (3 bootstrap) 16 videoları ile bir sayfaya (IE ince oynadığı) Chrome veya Firefox hiçbir mp4 oynatma ile bir sorunu çözmüş tüm videoların oranları aynı olmalıdır. 25fps'de 12 video ve 29.97fps'de 12 tane vardı ... tüm 25fps sürümleri oluşturduktan sonra, her şey tüm tarayıcılarda düzgün çalışıyor.

0
Bu benim için çalıştı

:

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