First frame of the background video doesn't show on Android

Question

I have the following code:

.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>

To explain what happens:

On iOS Safari, I hide the video play button and it shows the first frame of the video.
On desktop video plays in an infinite loop.
When I switch to Android (Oppo R7s ColorOS 5.1.1) instead of the first frame browser shows black background.
Although on Nexus 5X Android 6.0.1 mobile Chrome browser everything works fine and I can see the background image.

From what I've found from the internet the reason for such behaviour could be disabled Javascript in the mobile browser, but enabling the Javascript functionality didn't help.

If somebody has experience with developing for OPPO phones, please tell how to show background image instead of black background on this phone.

UPDATE: Even though the bounty has been expired the question still remains open.

@ThomasJames your suggestion only shows a background image for a couple of seconds and then it turns black again. — Alex Ljamin, Aug 23 '16 at 02:55
@alljamin Can you please try OGG video format and then open it in Android browser and check if it's working? — SE_User, Aug 23 '16 at 09:44
@AravindAjith I do not need/want the video to play on Android. I want to show a background image instead of the video as it already works on iOS. I don't see how would changing the video format (btw [webm is better](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) anyway) will solve the black background issue. — Alex Ljamin, Aug 23 '16 at 09:59
@alljamin Not sure if this helps: http://stackoverflow.com/questions/22016320/html5-video-background-in-android-showing-black — cytsunny, Aug 24 '16 at 05:39

score 3 · Answer 1 · answered Aug 24 '16 at 20:14

3

I'm suspicious of this rule:

-webkit-appearance: none;

I would back out all CSS and add it back one rule at a time to find the offending individual rule if you have not already. Ultimately, you may have to compromise in one view, but in this way you should be able to minimize the damage.

answered Aug 24 '16 at 20:14

cage rattler

1,587
10
16

I have been commenting out every line one by one and it still doesn't make sense. If I comment out the part what hides the play button - the play button will appear. Also, I don't have the physical Android device so I'm switching from one emulator (Genymotion) to another (Appetize.io) and each of them is showing different results both running on Nexus 5X 6.0.0. – Alex Ljamin Aug 25 '16 at 01:40
Has anyone confirmed the issue in an actual Android device? – cage rattler Aug 26 '16 at 12:48
I don't own Android device myself, but used my friend's Samsung Galaxy S5 mini with Android 5.1.1 many times to confirm that the issue remains. And as I have mentioned I constantly use emulators (but as the practice shows they're not that effective) – Alex Ljamin Aug 26 '16 at 23:05

First frame of the background video doesn't show on Android

1 Answers1