Black screen on chrome for android html5 video

Question

Problem: The videos are placed in my site: http://dege.cloud/ (click on one of the pictures) When I load the page on my desktop or on firefox mobile everything is fine. When the same page is loaded on chrome for android the video is black without controls, the videos don't have audio, so I don't know if it plays.

Expected results: The videos should be playable, hml5 video tag doesn't start automatically on mobile, but that's not a problem.

Analysis: The Content-Type of the videos are correct and inspecting the console on the device don't provide errors. I gave webm and mp4 version of the videos (ripped from http://giphy.com/ ).

The code for the video is this:

<video autoplay muted loop class="img-responsive img-centered">
    <source src="img/portfolio/campominato-video.webm" type="video/webm" class="img-responsive img-centered">
    <source src="img/portfolio/campominato-video.mp4" type="video/mp4" class="img-responsive img-centered">
    <img src="img/portfolio/campominato-screen.png" class="img-responsive img-centered">
</video>

jsfiddle of the problem in action: https://jsfiddle.net/Dege/1es4516p/

Answer 1

From what I can tell, the problem is the expectation that it would autoplay; while chrome Android 53 will autoplay muted videos, the current default version (51) won't.

In any case, if you add the controls attribute to the video element and press play, the video correctly plays, which confirms it is not an encoding issue.

(FWIW, the jsfiddle has 3 slashes in the http scheme used to load the videos; that's not the issue, but you might want to fix it nevertheless)