html5 video hintergrund video auf ios

Ich habe das folgende Video, das Teil eines Schiebers ist.html5 video hintergrund video auf ios

<div class="slide video-bg"> 
    <video muted webkit-playsinline playsinline poster="/video/3/4_Marching_band-HD_1080p.jpg"> 
     <source src="/video/3/4_Marching_band-HD_1080p.webm" type="video/webm"> 
     <source src="/video/3/4_Marching_band-HD_1080p.mp4" type="video/mp4"> 
     <source src="/video/3/4_Marching_band-HD_1080p.ogv" type="video/ogg"> 
    </video> 
</div>

Wenn die Seite geladen, play() auf dem Video genannt wird. Auf jedem Desktop-Browser, den ich ausprobiert habe, funktioniert das großartig. Aber auf iOS wird das Video nie abgespielt.

Ich habe https://webkit.org/blog/6784/new-video-policies-for-ios/ gelesen und versucht, jeder Anforderung zu folgen. Ich fügte dem Video sogar das Attribut autoplay hinzu, obwohl ich es mit js steuern möchte. Das Video hat kein Audio und ist sichtbar, wenn die Seite geladen wird. Irgendeine Idee, warum es nicht auf iOS spielen wird?

Seite in Frage: http://heartland.thinkersites.com/products/

Quelle

2017-02-14 Craig Harshbarger

wird es nicht spielen, weil mobiler Browser Interaktion mit dem Benutzer erfordern, um ein spielen Video. Das bedeutet, dass die Wiedergabemethode von einem Ereignis mit Benutzerinteraktion wie "onClick" weitergegeben werden muss. Wenn Sie es sofort spielen möchten, müssen Sie die Autoplay wie Sie müde verwenden. – MennyMT

@KingpinEX Aus dem Webkit.org Blog Link in meinem Beitrag "Videoelemente dürfen ohne Benutzergeste abgespielt werden(), wenn ihr Quellmedium keine Audiospuren enthält oder wenn ihre stumme Eigenschaft auf" True "gesetzt ist." Außerdem habe ich erwähnt, dass ich den Autoplay-Modus ausprobiert habe und das auch nicht funktioniert hat. –

Fügen Sie diese auf Ihren CSS die unansehnliche Play-Taste von iOS-Geräten zu entfernen:

   *::-webkit-media-controls-panel { 
        display: none!important; 
        -webkit-appearance: none; 
       } 

       *::--webkit-media-controls-play-button { 
        display: none!important; 
        -webkit-appearance: none; 
       } 

       *::-webkit-media-controls-start-playback-button { 
        display: none!important; 
        -webkit-appearance: none; 
       }

Quelle

2017-02-14 20:47:31

Das playasinline-Attribut hinzuzufügen schien das zu tun. Momentan habe ich keine Play-Taste. Video wird nicht automatisch abgespielt, das ist das Problem. –

html5 video hintergrund video auf ios

Antwort

Verwandte Themen