Bootstrap 3 - Отзывчивый mp4-video

Я попытался найти хорошее решение на сайте bootstrap, но пока не получил ответа. Я думаю, что я не могу быть единственным, кто борется с этим, но я не мог найти ничего, что помогло мне.

Я пытаюсь встроить mp4-видео на свой сайт. Проблема в том, что если я использую iframe-тег, я не могу использовать autoplay и loop. Из-за этого я хотел бы решить его с помощью тега видео (или что-то еще, что поддерживает автовоспроизведение и цикл). После этого я попытался настроить свое видео с помощью тега-объекта, но это не сработало. Несмотря на то, что я разрешил это в своем коде (чтобы показать вам), который вы можете увидеть ниже:

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

Я надеюсь, что кто-то из вас поможет мне исправить это.

Ответы

Ответ 1

По моему мнению, вы хотите встроить видео на свой сайт, чтобы:

  • Отвечает
  • Позволяет автовоспроизведение и цикл
  • Использует Bootstrap

Этот Demo Here делает именно это. Вы должны разместить другой класс встраивания вне тега object/embed/iframe в соответствии с инструкциями здесь - но вы также можете использовать тег видео, а не тег объекта, даже если он не указан.

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

Ответ 2

Просто добавьте class= "img-отзывчивый" к тегу видео. Я делаю это в текущем проекте, и он работает. Его не нужно обертывать ничем.

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

Ответ 3

используя этот код, даст вам отзывчивый видеоплеер с полным контролем

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

Ответ 4

Совет для MULTIPLE VIDEOS на странице: Недавно я решил проблему без воспроизведения mp4 в Chrome или Firefox (отлично играл в IE) на странице с 16 видео в модалах (bootstrap 3) после обнаружения частоты кадров всех видео должно быть одинаковым. У меня было 6 видеороликов со скоростью 25 кадров в секунду и 12 при 29,97 кадра в секунду... после рендеринга всего до 25fps версий все работает ровно во всех браузерах.

Ответ 5

Это сработало для меня:

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

Ответ 6

То же самое, у меня сработало отлично, просто сделай так:

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