HTML5 Контейнер видео появляется черный

Question

В настоящее время я создаю статический сайт, который использует видео в формате .mp4. Я использую Middleman и хостинг с Heroku (бесплатный план). На моем локальном сервере все работает чудесно, но в развернутой версии Heroku видео появляется как черный ящик. В Safari и Firefox нет контейнера вообще. Все мои другие активы, похоже, хорошо загружаются. Видеоролик составляет 5,9 мб. Любая идея, что здесь происходит? Заранее спасибо!!

<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video> 

Answer 1

В теории, если вы не укажете «плакат» изображение, чтобы отобразить до старта видео, браузер должен отобразить первый кадр видео:

• http://www.w3schools.com/tags/att_video_poster.asp

На практике браузеры, похоже, реализуют это непоследовательно, и я видел некоторые случаи мобильных устройств, где определенные видео отображают первый кадр, а другие - черный ящик, даже для тех же типов видео.

Чтобы избежать проблемы, вы можете указать свое изображение, которое будет отображаться с использованием механизма, упомянутого в ссылке выше, - это должно работать последовательно в браузерах. HTML будет выглядеть примерно так:

<video class="vid-home" controls poster="yourImage.png" autoplay loop muted> 
    <source src="/videos/home.mp4" type="video/mp4"> 
    Your browser does not support the video tag or format. 
</video>