Responsive HTML5 CSS mit Medienabfragen, die verschiedene Videoeinstellungen für verschiedene Bildschirmgrößen erstellen - css, html5, video

Ich möchte 2 verschiedene Videos in meinerAls reaktionsschnelle Seite sollte einer auf PC-Bildschirmen und der andere auf Bildschirmgrößen unter 1025px angezeigt werden. Der Grund, warum ich das tun muss, ist, dass das Video auf PCs automatisch abgespielt werden soll. Auf mobilen Geräten ist Autoplay jedoch nicht verfügbar. Für mobile Geräte muss ich Steuerelemente hinzufügen und das automatische Abspielen aus der HTML-Datei entfernen.

Also hier ist mein aktueller Code nur mit einem VideoFür alle Bildschirmgrößen nicht aus dem oben genannten Grund auf automatische Wiedergabe eingestellt. Meine Frage ist, wie ich diesen Code in den CSS-Medienabfragen ändern kann, um 2 Videos mit unterschiedlichen Einstellungen zu haben: 1 mit Autoplay für PC-Bildschirme und 1 mit Player für mobile Bildschirme. Mein aktueller Code funktioniert gut und zeigt das Video auf allen Geräten an, auf denen sich ein Player befindet. Ich habe nur eine CSS-Stylesheet-Datei, die hiermit getrennt ist:

@media only screen and (min-width: 150px) and (max-width: 1025px)

Der html:

<div class="videoScreen">

<video src="video/somevideo.mp4" controls="controls"></video>

</div>

Das CSS über dem @media

.videoScreen video {
width:99.8%;
height: auto;
margin: 0.5% 0 0 0;

}

Das CSS unter dem @media

.videoScreen video {
width:100%;
height: auto;
margin: 3% 0% 0% 0%;


}

Antworten:

Die automatische Wiedergabe ist nicht wirklich ein CSS-Problem. Sie können entweder JavaScript / Jquery verwenden, um den HTML-Code des Video-Tags basierend auf der Bildschirmgröße zu ändern.

 if (  $(window).width() > 1025px ) {
$(‘.videoScreen’).html(‘whatever your autoplay html is’);
}

Am einfachsten wäre es, den iframe für das Video neu zu schreiben und die Einstellung für die automatische Wiedergabe zu ändern.

 if (  $(window).width() > 1025px ) {
$(‘.videoScreen’).html(‘<iframe width="640" height="390" src="http://www.youtube.com/embed/R95V8u9ZQAw?vq=hd720&amp;autohide=1&amp;autoplay=1&amp;showinfo=0&amp;controls=2&amp;rel=0&amp;color=white" frameborder="0" style="max-height:100%;max-width:100%;"></iframe>’);
}

Anstatt dies auf der Bildschirmbreite einzustellen, können Sie im Idealfall eine Funktionserkennung für ein Touchgerät durchführen.

http://modernizr.com kann dabei helfen.