Wie spielen manche Websites Video inline in iOS Safari ab?

Question

Ziemlich unglaublich, da ich dachte, dass alle Videos erweitert wurden, um Vollbild in der regulären Safari zu spielen. Check this out zum Beispiel:

http://www.theonion.com/video/onion-reviews-rogue-one-54906

Das Video spielt Inline- und hört nicht auf, auch wenn ich Safari Tabs wechseln. Was passiert dort? Verwenden sie js und HTML5 Canvas, um das Video oder etwas zu rendern? Wie synchronisieren sie den Sound so gut?

Answer 1

Nur eine Antwort konstruieren basierend auf der link @offbeatmammal in seinem Kommentar geschrieben.

Auch basierend auf new video policies for ios speziell, dass:

Auf dem iPhone werden Elemente jetzt Inline spielen dürfen, und nicht automatisch Vollbild-Modus geben wird, wenn die Wiedergabe beginnt. Elemente ohne Spielattribute benötigen weiterhin den Vollbildmodus für die Wiedergabe auf dem iPhone. Wenn Sie den Vollbildmodus mit einer Pinch-Geste beenden, werden Elemente ohne Spiellinie weiterhin inline abgespielt.

Eine Notiz über das playsinline Attribut:

dieses Attribut wurde die HTML-Spezifikation vor kurzem hinzugefügt, und WebKit hat dieses neue Attribut angenommen durch sein Vermächtnis Webkit-playsinline Attribut unprefixing. Dieses Legacy-Attribut wurde seit iPhoneOS 4.0 unterstützt, und wir freuen uns, in Übereinstimmung mit unserer aktualisierten Prefix-Richtlinie webkit-playsinline vorzufixieren. Leider hat diese Änderung nicht den Cut-off für iOS 10 Developer Seed 2 ermöglicht. Wenn Sie mit dieser neuen Richtlinie mit iOS Developer Seed 2 experimentieren möchten, funktioniert das Präfix-Attribut, aber wir empfehlen Ihnen, auf das Präfix umzusteigen Attribut, wenn Unterstützung für einen zukünftigen Seed verfügbar ist.

schließlich ein Beispiel:

<video autoplay loop muted playsinline> 
    <source src="image.mp4"> 
    <source src="image.webm" onerror="fallback(parentNode)"> 
    <img src="image.gif"> 
</video> 

mit einem Sturz zurück, die ein Bild anzeigt, auf Video Fehler

function fallback(video) 
{ 
    var img = video.querySelector('img'); 
    if (img) 
    video.parentNode.replaceChild(img, video); 
}