Responsive HTML5 CSS utilizzando le query multimediali creando diverse impostazioni video per diverse dimensioni dello schermo: css, html5, video

Voglio avere 2 video diversi nel miosito reattivo, uno dovrebbe essere visualizzato su schermi PC e l'altro su dimensioni schermo sotto 1025px. Il motivo per cui devo farlo è che voglio che il video venga riprodotto automaticamente sui PC, ma la riproduzione automatica non è disponibile sui dispositivi mobili, quindi per i dispositivi mobili devo aggiungere controlli e rimuovere l'autoplay dall'html.

Quindi, ecco il mio codice corrente con un solo videoper tutte le dimensioni dello schermo, non impostato per la riproduzione automatica per il motivo sopra riportato. La mia domanda è come posso cambiare questo codice nelle query multimediali CSS per avere 2 video con impostazioni diverse: 1 con autoplay per gli schermi PC e 1 con un lettore per gli schermi mobili. Il mio codice attuale di seguito funziona bene, visualizzando il video su tutti i dispositivi con conjtrol in un lettore. Ho solo 1 file di fogli di stile CSS separato con questo:

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

L'html:

<div class="videoScreen">

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

</div>

Il CSS sopra il @media

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

}

Il CSS sotto il @media

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


}

risposte:

La riproduzione automatica non è un problema css. Puoi utilizzare javascript / jquery per modificare l'html del tag video in base alle dimensioni dello schermo-

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

la cosa più semplice sarebbe semplicemente riscrivere l'iframe per il video, cambiando l'impostazione di riproduzione automatica.

 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>’);
}

Idealmente, invece di impostarlo in base alla larghezza dello schermo, è possibile eseguire un rilevamento di funzionalità per un dispositivo touch.

http://modernizr.com può aiutare con quello.