Не работает html5 видео в мобильниках

#html #html5 #video

Вставил фоном html5 видео (видео расположено локально): 

HTML


    

         



Css

header{
    /*background-image: url("../img/slide1.png");*/
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    height: 100vh;
    min-height: 100px;
}

video{
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    width: auto;
    /*height: auto;*/
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.video{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -99;
    /*background: #000;*/
    background:url(../images/overlay.png) repeat;
    opacity: 0.8;
}


И тут возникла проблема - видео совсем не отражается на мобильных устройствах - просто
черный экран, ни на гугл хром (андройд), ни на iphone. Что я сделал не так?

UPDATE

я уже урезал код вот так: 




и все равно не работает

UPDATE2

 


Если вставляю так, то включается плеер и при нажатии на play видео начинает проигрывается,
но мне бы видос как фон поставить с loop и autoplay 
    

Ответы

Ответ 1

Html должен быть валидным. 


   



В html коде страницы первый тег обязательно должен быть .
А также в head надо указывать, например, 


Ответ 2

Функция автовоспроизведения видео специально отключена на мобильных устройствах.
Вот, например, что по этому поводу пишет Apple:


  In Safari on iOS (for all devices, including iPad), where the user may
  be on a cellular network and be charged per data unit, preload and
  autoplay are disabled. No data is loaded until the user initiates it.


Аналогично в Android 4.1+ тоже отключен автоплей.
Одним, словом, производители смартфонов озаботились о том, чтобы пользователи не
тратили слишком много мобильного интернета.


Ответ 3

У меня такая же проблема получилась, только у меня видео не фоном, а просто располагаются
на странице... решил добавлением controls. При этом на страницах с ПК видео проигрываются
автоматически, а на мобильных устройствах их нужно включать вручную. Оказывается мобильные
устройства плохо относятся к autoplay видео.




Мои видео - это бывшие флеш-ролики без звука, поэтому добавлен параметр muted. Все
параметры, кроме preload могут быть без передаваемых параметров, это корректно.

Ставил опыты, действительно, от валидности сконвертированного видео многое зависит
(невадиное не проигрывается).


Ответ 4

Вот так будет валидно, попробуйте так, и проблем с плерами быть не должно




Ответ 5

Добавьте это в свой код и видео будет работать на телефоне.

video autoplay loop muted playsinline webkit-playinginline