Entfernen/Austausch von HTML-Inhalten mit Medienabfragen?

Question

Da Video-Hintergründe normalerweise nicht automatisch auf tragbaren Geräten abgespielt werden, möchte ich das Video je nach Bildschirmgröße entfernen und durch ein bg-Bild ersetzen.

Was ist der beste Weg, dies zu erreichen? Ist es möglich, mit Medienanfragen zu tun? :)

Answer 1

Beste Methode IMO wäre zu erkennen, ob der Benutzer von Mobilgerät oder Standardgerät mit ihrem User Agent kommt und dann den Videohintergrund auf Standardgeräten zeigt und das Hintergrundbild auf den mobilen Geräten zeigt.

Je nach der Sprache, die Sie für die Website verwenden, ist die Erkennung eines mobilen Geräts mithilfe des Benutzeragenten relativ einfach.

Answer 2

Sie können ein Bild für das Video-Tag im HTML-Format festlegen. Wenn das Video also nicht unterstützt wird, wird ein Bild angezeigt. Dies ist normalerweise der einfachste Weg, um ein Bild laden zu lassen, wenn Sie beispielsweise auf dem Handy sind, anstatt eine separate Webseite für Handys zu haben. Sie können mehr darüber zu lesen, wie dies hier zu tun: http://www.html5rocks.com/en/tutorials/video/basics/

Answer 3

Um ein anderes Stück Code hat je nach Gerät auszuführen die Benutzer Ihrer Website aus zuschauen, ich schlage vor, Sie verwenden @media queries.

Targeting Smartphones:

Nicht alle Smartphones sind gleich groß, aber als Faustregel verwenden:

@media screen and (device-width: 360px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) { 
    .imageelement { 
     /* Your css code*/ 
     display: block !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: none !important; 
    } 

}

Targeting Tabletten:

Beim Targeting von Tablets sollten Sie die Abmessungen beibehalten auf diesen Bereich:

@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .imageelement { 
     /* Your css code*/ 
     display: block !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: none !important; 
    } 
} 

Targeting Laptops und größere Geräte:

Schließlich ist dies, wenn Sie Ihr Video angezeigt werden soll setzen.

@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .imageelement { 
     /* Your css code*/ 
     display: none !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: block !important; 
    } 

}

Wenn Sie this page mehr über @media queries Besuch kennen.