Первый кадр фонового видео не отображается на 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, расскажите, как отображать фоновое изображение вместо черного фона на этом телефоне.

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

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

 -webkit-appearance: none; 

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

Intereting Posts
Изменение цвета текста NumberPicker Добавить макет прогамально андроид Переход на другую вкладку несколько раз дает EEROR Для Android, где я могу найти полный список действительных идентификаторов проблемы @SuppressLint Получение 401 несанкционированной ошибки в модификации? Как установить маржу динамически в Android? Как фильтровать ListView с помощью getFilter () в BaseAdapter Проверка наличия порта сервера с Android Не удается разрешить метод .runOnUiThread Соединение сокетов Bluetooth Bluetooth слишком длительное и в конечном итоге При использовании JSON во Фрагментах приложение не отвечает в Android Development Откройте собственную телефонную книгу в качестве намерения и используйте ее для поиска. Возможное? Как отключить горизонтальную прокрутку в веб-браузере Android Android, Как сделать прозрачную строку состояния правильно Отправить arraylist из сервлета в приложение для Android