HTML5 Видео не отображается на мобильных устройствах?

Я пытаюсь отобразить текст поверх фонового видео. Я использовал простые HTML5 и CSS для этого. Мой код отлично подходит для настольных сайтов с использованием Chrome, Safari и Firefox, но когда пользователь просматривает страницу на устройстве Android или iPhone ... только текст появляется, и видео отказывается играть (я тестирую на iPhone 6s Plus и Samsung S5).HTML5 Видео не отображается на мобильных устройствах?

Вот живой предварительный просмотр данной страницы: http://buzzanimatedvideos.com/video-test/

А вот CSS & HTML Я использую:

.header-unit { 
 
     background: #fff; 
 
     border: 0 solid #fff; 
 
     height: 500px; 
 
     border: none; 
 
     position: relative; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     text-align: center; 
 
     margin: 0 auto; 
 
    } 
 
    .video_container { 
 
     text-align: center; 
 
     margin: 0 auto; 
 
     position: absolute; 
 
     top: -50%; 
 
     left: -50%; 
 
     width: 200%; 
 
     height: 200%; 
 
    } 
 
    video { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     left: 0; 
 
     margin: auto; 
 
     min-height: 50%; 
 
     min-width: 50%; 
 
    } 
 
    .video-overlay { 
 
     position: relative; 
 
     z-index: 999; 
 
     text-align: center; 
 
     margin: 0 auto; 
 
    } 
 
    .video-overlay-color { 
 
     background-color: rgba(0,0,0,0.5); 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 100%; 
 
     top: 0%; 
 
     bottom: 0; 
 
     left: auto; 
 
     right: auto; 
 
     margin: 0 auto; 
 
     text-align: center; 
 
    } 
 
    .video-overlay-content { 
 
     position: absolute; 
 
     z-index: 9999; 
 
     opacity: 1; 
 
     width: 100%; 
 
     height: 100%; 
 
     top: 25%; 
 
     bottom: 0; 
 
     left: auto; 
 
     right: auto; 
 
     margin: 0 auto; 
 
     text-align: center; 
 
    } 
 
    .video-overlay-content h1 { 
 
     max-width: 640px; 
 
     color: #fff; 
 
     margin: 0 auto; 
 
     text-align: center; 
 
     font-size: 3.1rem; 
 
    } 
 
    .video-overlay-content p { 
 
     margin-top: 1rem; 
 
    }

<div class="video-overlay"> 
 
    <div class="header-unit"> 
 
     <div class="video_container"> 
 
     <video poster="/wp-content/themes/buzz/vid/video-still.jpg" preload autoplay loop> 
 
      <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.mp4" type="video/mp4" /> 
 
      <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.webm" type="video/webm" /> 
 
      <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.ogv" type="video/ogg" /> 
 
     </video> 
 
     </div> 
 
    </div> 
 
    <div class="video-overlay-color"> 
 
     <div class="video-overlay-content"> 
 
     <h1>ANIMATED VIDEOS THAT ENTERTAIN, EXPLAIN & GAIN NEW CUSTOMERS</h1> 
 
     <p><a href="/portfolio/" class="button large-alt">WATCH OUR VIDEOS</a></p> 
 
     </div> 
 
    </div> 
 
</div>

Кто-нибудь знает, что этот вопрос является? Я искал высоко и низко для какой-то подсказки, но у меня ничего нет. =/Спасибо за вашу помощь!

источник

2015-12-19 Thaddeous

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

Awesome. Я не знал этого. Тем не менее, я решил автовоспроизведение на мобильных устройствах, преобразовывая видео в GIF. Я скрываю видео ниже 640px и отображаю GIF. GIF просто продолжает цикл, независимо от пользовательского ввода, поэтому он работает достаточно хорошо. – Thaddeous

источник

2016-01-28 23:01:11 Thaddeous

HTML5 Видео не отображается на мобильных устройствах?

ответ

Смежные вопросы