Intereting Posts

Первый кадр фонового видео не отображается на Android

У меня есть следующий код:

.background-video { position: fixed; z-index: -10; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-background-size: cover; -moz-background-size:cover; background: url(video.jpg) no-repeat center center fixed; background-size: cover; } @media (max-width: 767px) { *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none } } 
 <video autoplay loop class="fillWidth background-video" poster="video.jpg"> <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'/> <source src="video.ogg" type='video/ogg; codecs="theora, vorbis"'/> </video> 

Объяснить, что происходит:

  • На iOS Safari я скрываю кнопку воспроизведения видео, и на ней отображается первый кадр видео.
  • На настольном видео воспроизводится в бесконечном цикле.
  • Когда я переключаюсь на Android (Oppo R7s ColorOS 5.1.1), вместо браузера первого кадра отображается черный фон.
  • Хотя на мобильном браузере Chrome Nexus 5X Android 6.0.1 все работает отлично, и я вижу фоновое изображение.

Из того, что я нашел из Интернета, причиной такого поведения может быть отключена Javascript в мобильном браузере, но включение функции Javascript не помогло.

Если у кого-то есть опыт разработки телефонов OPPO, расскажите, как отображать фоновое изображение вместо черного фона на этом телефоне.

ОБНОВЛЕНИЕ: Несмотря на то, что щедрость истекла, вопрос остается открытым.

Solutions Collecting From Web of "Первый кадр фонового видео не отображается на Android"

Я с подозрением отношусь к этому правилу:

 -webkit-appearance: none; 

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