Ich schreibe eine einfache Webseite mit responsivem Webdesign, so dass CSS3-Medienabfragen verschiedene Stylesheets basierend auf der Bildschirmauflösung bedienen. Um es einfach zu halten, sagen wir, es gibt eine iPhone-Version und eine Desktop-Version. Ich benutze den html5-Video-Tag, um Videos zu liefern, und ich würde gerne ein 720p-Video bereitstellen, wenn auf die Website mit einem Desktop zugegriffen wird und ein kleineres 320p-Video, wenn mit einem iPhone zugegriffen wird. Bin ich falsch oder es gibt keine einfache Möglichkeit, es nur mit HTML / CSS zu tun? Muss ich JavaScript verwenden, um das video src Attribut dynamisch zu ändern? Wenn ja, welche sind die besten Praktiken? Vielen Dank im Voraus.
Sie können das media -Attribut zu den verschiedenen source -Elementen hinzufügen, wodurch Sie verschiedene Videos für Geräte bereitstellen können, die mit Medienabfrageeinstellungen übereinstimmen (wie oben mit DBUK verlinkt).
Zum Beispiel:
%Vor%Update - 24.07.2012 Es ist wahrscheinlich, dass aus der Spezifikation entfernt wird .
>Tags und Links html5 html5-video responsive-design