mercoledì 25 giugno 2014

Video Player Responsive: un semplice tutorial per incorporare video in siti responsive

L'utilizzo delle tecniche di responsive web design sono in continua crescita tra programmatori e designer, grazie anche alla diffusione di web framework come Bootstrap e Foundation. Il responsive web design permette di realizzare siti web in grado di adattarsi graficamente in automatico in base allo schermo del device, sia esso un PC, un tablet o uno smartphone. Ma cosa succede quando si prova ad incorporare un video player all'interno di un layout responsive?
Se si incorpora l'iframe di un video player in una pagina web responsive si nota che di default questo non viene ridimensionato con la finestra del browser. Questo si verifica perché, per impostazione predefinita, al video player viene data una larghezza e altezza fissa, impedendogli di adattarsi alle dimensioni dello schermo del dispositivo.

Vediamo di seguito qualche semplice regola CSS per ottenere un video player responsive.

Per prima cosa, si inserisce  l'iframe del video player all'interno di un contenitore <div>. Questo è il codice HTML:
  <div class="video-container"> 
<iframe id="com-wimlabs-player" name="com-wimlabs-player" src="https://www.wim.tv:443/wimtv-webapp/rest/showtime/e1d49a44-e419-4859-a114-82dc62957e59/embedded?width=692&height=440" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" frameborder="0" width="560" height="315"></iframe>
</div>
Assegniamo al <div> una classe, in questo caso chiamata .video-container. Questo è il codice CSS da applicare:
.video-container {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}
Nella classe .video-container la percentuale del padding-bottom definisce l'altezza, è di 56.25% per mantenere un aspect ratio di 16:9. Se il video ha un formato diverso da 16:9 è possibile scoprire la percentuale corretta con questo calcolo:  (altezza del video x 100) / larghezza. Ad esempio nel caso dei video in 4:3 la percentuale da inserire è 75%

Posizioniamo l’iframe in absolute con width e height a 100% per indurre il video a ridimensionarsi: modificando il valore di width possiamo invece decidere la larghezza del player rispetto al div contenitore.

Semplice no? Puoi vedere un esempio del risultato ottenuto con questo codice a questo link. In questo esempio abbiamo utilizzato un video pubblicato sulla piattaforma WimTV.

martedì 20 maggio 2014

Offerta Live Streaming All Inclusive

Vuoi trasmettere in diretta live streaming?

WimLabs offre il pacchetto Live Streaming All Inclusive, comprensivo della strumentazione completa per trasmettere in diretta live in modo semplice e autonomo:

- Una o due videocamere telealimentate
- Uno o due microfoni
- Un pc desktop per la codifica e lo storage
- Software di compressione e streaming
- Software di controllo telecamere e regia
- Servizio streaming WimLive

L'offerta è altamente personalizzabile e seconda delle necessità. Visita il sito per maggiori informazioni o contattaci per richiedere un preventivo!


lunedì 5 maggio 2014

Nuovo sito WimLabs: soluzioni per i video online, streaming live e on demand


E' online il nuovo sito WimLabs!
Le soluzioni professionali per i video online e per lo streaming live e on demand da oggi sono più accessibili grazie alla nuova veste grafica e al layout responsive ottimizzato anche per smartphone e tablet.

Sul sito sono suddivisi e facilmente accessibili i servizi e le soluzioni offerte dalla piattaforma WimTV per la creazione di Web TV, streaming video on demand, live streaming, plugin video, monetizzazione video e streaming su Mobile e Smart TV.

Voglia di app? Naviga le soluzioni proposte da WimLabs per sfruttare al meglio le opportunità del web su Mobile oppure contattaci per una soluzione personalizzata!

lunedì 7 aprile 2014

WimTrade: crea e partecipa a video contest da pc e smartphone

E' uscita l'ultima fresca realizzazione della linea WimTV: si tratta di WimTrade, il servizio che permette di creare call per richiedere video di determinate categorie e partecipare con i propri video, anche attraverso smartphone/iPhone e tablet.

Video animazione di WimTrade


Con WimTrade puoi fare video crowdsourcing da milioni di potenziali utenti geolocalizzati in tutto il mondo. Come? E' semplice. Basta creare un'utenza direttamente sul sito di WimTrade, o se sei già iscritto a WimTV, utilizzare username e password che hai scelto al momento della registrazione.

Puoi creare una o più call e richiedere categorie specifiche di video.
Ad esempio: sta accadendo un evento mediatico di grande interesse e la tua redazione vuole accedere a contenuti video in tempo reale? Oppure stai cercando un video divertente ed esclusivo da postare sul tuo blog?
Inserisci una descrizione con le caratteristiche del video che cerchi, specifica la durata del video e un tempo limite entro il quale vorresti ricevere i video in risposta alla tua call. Se vuoi incentivare maggiormente i partecipanti ad inviarti video di qualità, puoi anche proporre un premio o una ricompensa per i video migliori che ti verranno inviati e che sceglierai per la pubblicazione.

Se sei un aspirante reporter o ti diletti a filmare il mondo intorno a te con il tuo smartphone, magari non ti interessa creare una call ma potrebbe farti piacere partecipare a quelle già attive... dai un'occhiata alle call su WimTrade e partecipa con i tuoi video direttamente dal tuo smartphone/iPhone/tablet grazie all'app WimLance per Android e WimLance per iOS scaricabili gratuitamente. Potresti ricevere una ricompensa per il tuo lavoro e perchè no, anche avviare delle collaborazioni proficue e durature.




giovedì 9 gennaio 2014

La guida support.wim.tv per informazioni sui servizi di WimTV

Ciao e buon 2014!

Per rendere ancora più semplici e accessibili i servizi di WimTV, abbiamo creato il sito support.wim.tv, una guida online dove troverai informazioni sui servizi di WimTV e soluzioni per trasmettere in streaming sul web.

Se stai cercando una soluzione per trasmettere video live, on demand, mettere in vendita i tuoi video, creare e partecipare a contest video o integrare una Web TV all'interno del tuo sito web, WimTV è la piattaforma che fa per te.
Scopri come puoi far business con i contenuti digitali in modo più conveniente, efficace e remunerativo!