Schwarzer Bildschirm auf Chrome für Android html5 Video

Question

Problem: Die Videos werden in meiner Seite gestellt: http://dege.cloud/ (Klicken Sie auf eines der Bilder) Wenn ich die Seite auf meinem Desktop laden oder auf Firefox Mobile alles ist in Ordnung. Wenn die gleiche Seite auf Chrome für Android geladen wird, ist das Video schwarz ohne Steuerelemente, die Videos haben kein Audio, so dass ich nicht weiß, ob es spielt.

Erwartete Ergebnisse: Die Videos sollten spielbar sein, hml5 Video-Tag nicht automatisch startet auf Handy, aber das ist kein Problem.

Analyse: Der Inhaltstyp der Videos ist korrekt und die Überprüfung der Konsole auf dem Gerät keine Fehler. Ich gab webm und mp4 Version der Videos (von http://giphy.com/ gerippt).

Der Code für das Video ist dies:

<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 des Problems in Aktion: https://jsfiddle.net/Dege/1es4516p/

Answer 1

Von dem, was ich sagen kann, das Problem ist die Erwartung, dass es automatisch wiedergegeben würde; während Chrome Android 53 autoplay muted videos wird die aktuelle Standardversion (51) nicht.

In jedem Fall, wenn Sie das Attribut controls dem Videoelement hinzufügen und Play drücken, wird das Video korrekt wiedergegeben, was bestätigt, dass es sich nicht um ein Codierungsproblem handelt.

(FWIW, die jsfiddle hat 3 Schrägstriche in der http-Schema verwendet, um die Videos zu laden, das ist nicht das Problem, sondern möchten Sie vielleicht, es beheben trotzdem)