OS-media video plugin WordPress – versione 2

Video plugin WordPress studiato per trasformare la tua piattaforma preferita in una stazione multimediale per contenuti video responsive, basata sul player HTML5 Video-js ultima versione (5.2.1).

banner-772x250

Il video plugin WordPress OS-media genera un player video HTML5 (Video-js) e consente uno streaming di file in formato mp4/webm/ogv attraverso php sfruttando una tecnica chiamata download progressivo (HTTP pseudo-streaming).

Funziona con tutti i temi WP ma è disegnato specificamente per il tema OS-media, che è in grado di gestire i Custom Post Type (Featured Videos).

DEMO ONLINE pagina ufficiale WordPress

I video possono essere inseriti:

  • nei normali post/pagine attraverso gli shortcodes nella textarea.
  • nei Custom Post Type, un’area dedicata ai  “Featured Video”in cui è possibile inserire un unico video per ogni singola pagina (come le Featured Images di WordPress).

Ci sono 5 possibilità di inserimento dei video:

  • da un percorso locale (PATH) relativo all’installazione WordPress dove si trova il plugin (dopo aver caricato i file via FTP): basterà inserire il percorso locale nell’apposito input delle configs generali ( ad esempio: /opt/lampp/htdocs/wp/wp-content/uploads/video/). [i file trovati dal sistema saranno disponibili nel “file selector”]
  • da un qualsiasi file server o installazione WP: basterà inserire l’URL (http://...). [i file trovati dal sistema saranno disponibili nel “file selector”]
  • da Amazon S3 (Simple Storage Server). [i file trovati dal sistema saranno disponibili nel “file selector”]
  • con un upload diretto dal WordPress media uploader (per piccoli file video da caricare “al-volo”)

    [c 1=”un” 2=”input” 3=”ad” 4=”ogni” 5=”formato” 6=”video<strong>:” 7=”mp4,” 8=”webm,” 9=”ogg</strong>” language=”'è”][/c]

  • da Youtube o Vimeo, semplicemento inserendo l’ID del video [dedicated input]

OSmedia Featured video – Custom Post Type:
Questo video plugin WordPress utilizza un layout specifico suo interno per i singoli post, ma per la lista dei “Featured Video” è necessario usare un template ad hoc (come quelle presente nel tema costruito specificamente per questo plugin: Os-media theme). Tuttavia il plugin riconosce automaticamente alcuni degli ultimi template WP come Twenty Fifteen o Twenty Fourteen. Se il tuo tema non è riconosciuto, viene caricato di default il file layout/osmedia_cpt.php, che potrà essere modificato per visualizzare correttamente i Featured Video nel tuo specifico tema. Per visualizzare il Featured video in un singolo post può essere usata la funzione  Osmedia_video(), a cui possono essere passati tutti i parametri che il plugin gestisce.

OS-media video plugin WordPress - player

OS-media video plugin WordPress – player

Immagine poster per i video:

  • per i normali post e pagine è possibile caricare l’immagine dall’apposito input.
  • Nei Custom Post potranno essere usate le Featured Image di WordPress, in caso non siano presenti tali immagini, il plugin tenterà di caricare dallo stesso percorso dei file video anche le immagini, cercando file con lo stesso nome ma con estensione .jpg.

Option settings:
Alcune configurazioni sono  general config, ovvero non son o presenti nei singoli post e dunque essi hanno influenza anche sui post già creati in orecedenza (per esempio: “local video path”, o “player skin”). Mentre alcune altre sono default setting, ovvero parametri presenti anche nei singoli post e che dunque saranno impostazioni di default per i nuovi post, mentre verranno sovrascritte nei post esistenti dalle configurazioni del singolo post (esempi: “width“, or “autoplay“).

Esempio Shortcode:

[php]
video file=”demo” fileurl="https://s3-eu-west-1.amazonaws.com/” img="http://.." youtube="KTRVYDwfDyU" width="640" height="360"
[/php]

Video-js Skin:
Puoi creare una skin tua per il player semplicemente generando un file css attraverso questo tool: http://codepen.io/heff/pen/EarCt. Dopodichè tale file dovrà essere inserito nella cartella: player/videojs/skin. E’ necessario che il nome del file rifletta il nome della classe principale del foglio di stile (esclusa l’estensione .css).

Screenshots:

[av_masonry_gallery ids=’4768,4766,4765,4788′ items=’4′ columns=’4′ paginate=’pagination’ size=’fixed’ gap=’large’ overlay_fx=’active’ caption_elements=’excerpt’ caption_display=’always’ container_links=’active’ id=”]


List of all parameters of OS-media

IMPORTANT NOTE about old version (1.0):
I featured video post creati attraverso la vecchia versione del plugin devono semplicemente essere ricaricati nell’area admin and, quando appaiono i dati nei meta box, cliccare il bottone “Generate Shortcode” e quindi salvare il post. Questo perchè nella nuova versione i normali post e pagine possono generare video solamente attraverso gli shortcode.

Credits:
OS-media video plugin WordPress è basato su:

OS media – WordPress HTML5 Featured video plugin version 1.1

Plugin WordPress per l’inserimento di video nei post

Vai alla Repository di WordPress.org

Plugin per l’inserimento di video sia tramite tradizionai shortcode che in modalità “Featured”, all’interno di post o pagine WordPress, sia embed da Youtube/Vimeo che self-hosted utilizzando il player HTML5 Videojs.

Questo Plugin ha l’obiettivo di rendere la propria piattaforma WordPress una vera e propria stazione multimediale per la distribuzione di audio/video “on-demand”. Ciò attraverso una doppia modalità di inserimento: Featured per piattaforme video in cui avremo un video “in evidenza” per ogni post/pagina, oppure con il classico meccanismo degli short code aggiunti nella textarea.

Allo stesso tempo, permette l’inserimento nella propria piattaforma WordPress di video da Youtube, da Vimeo e video memorizzati localmente (self-hosted) attraverso un’unica comoda interfaccia relativa ad ogni singolo post/pagina. Utilizza la tecnologia video HTML5 e dunque il nuovo tag <video> e si appoggia all’ottimo player Videojs.

Vi sono due tipi di parametri di configurazione dei video: quelli “generali” (configurabili dalle opzioni generali del plugin, come ad es. la skin del player) e i “postmeta”, ovvero quelli relativi ad ogni singolo post/pagina. Nel caso vi siano sovrapposizioni tra i due (vedi ad esempio le dimensioni del player “height” e “width”), i “postmeta” prevalgono su quelli generali. Ogni volta che si crea un nuovo post vengono in esso importati i parametri delle configurazioni generali (tra cui height e width).

Queste funzionalità sono attivabili per ogni singolscreenshot-1o post attraverso il metabox “Os media Featured Video”. Le modalità Featuredshortcode sono alternative, ovvero con la prima abbiamo la possibilità di creare una vera e propria piattaforma video di distribuzione on-demand, basata sulla stessa logica delle Featured Image di WordPress (una per ogni post). Per visualizzare il video in questo caso , basterà aggiungere al Tema WordPress la funzione PHP:

OSmedia_video($post->ID)

Mentre nella modalità “shortcode” possono essere inseriti più video anche di tipo diverso (self-hosted e embed) nello stesso post attraverso un meccanismo automatico che genera gli shortcode a partire dalla comoda interfaccia di gestione dei parametri del video. Ovviamente gli shortcode sono gestibili solamente al di fuori della modalità “Featured”.

Per i video caricati in modalità self-host attualmente il plugin mette a disposizione l’uploader di WordPress il quale però si basa su PHP e dunque risente delle configurazioni del server in particolare per la dimensione massima dei file caricati (che normalmente è settata a 2-8 MB, troppo poco per i file video!). Ci sono due soluzioni possibili:

(1) O si interviente riconfigurando il motore di PHP aumentando il limite di upload (agendo sul parametro “upload_max_filesize” nel file php.ini);

(2) Oppure si utilizza il protocollo FTP per screenshot-2il trasferimento dei file ai quali poi dovremmo puntare indicando l’URL nell’apposito spazio di input, uno per ogni formato video (mp4, webm, ogv, oltre che per la cover image).

NOTA: in modalità Featured Video la funzionalità di preload dei video è attivata (il caricamento del video parte appena viene caricata la pagina), nel caso contrario in cui i video sono gestiti dagli short code, il preload è disattivato di default per evitare problemi di gestione delle pagine con video multipli. Tale parametro si può anche forzare tramite l’apposito checkbox.
Il parametro Responsive ratio forza il rapporto d’aspetto rispetto ai valori height e width inseriti in modo da compensare eventuali problemi di visualizzazione nella modalità “responsive”, di default il valore relativo all’aspect ratio 16:9 sarà:

9:16*100 = 56.25

Demo online che integra il tema OStheme, un child theme derivato da Twenty Thirteen:

Demo online

Shortcode “video”: Tramite questo shortcode potete inserire un video nel vostro blog di tipo self-hosted, ovvero caricato nel server su cui si appoggia il vostro blog.

Shortcode “youtube”: Tramite questo shortcode potete inserire un video in modalità “embed” proveniente dalla piattaforma Youtube.

Gli shortcode vengono generati automaticamente dal plugin nella textarea (purchè sia disattivata la modalità “Featured video”!) a partire dal metabox “OS media Featured Video”, tramite una comoda interfaccia, dunque non è necessario fornire esempi su inserimento manuale del codice.

NOTA 1:
E’ prevista per Ottobre 2015 la release della versione 2.0 del plugin. Stay tuned!

NOTA 2:

Elenco delle variabili usate [PDF]

video online: embedding o self-hosting?

embed_videoNell’era del web 2.0 pubblicare un video sul proprio sito è semplice come bere un bicchier d’acqua. A proposito dei video on-demand sul web, esistono due soluzioni che andremo a prendere in considerazione approfondendone gli aspetti tecnici: l’embedding e il self-hosting.

Prendiamo in considerazione il primo, l’embedding, ovvero l’incorporamento del video (e relativo player) nel nostro sito da una piattaforma esterna che offre tale servizio. In tal caso sono sufficienti due passi:

  • caricare un video su una delle piattaforme che offrono tale servizio, come You Tube, o Vimeo (dopo avere creato un nostro account, ovviamente..).
  • procedere all’incorporamento (embedding) nella nostra pagina web, attraverso lo speciale codice fornito dal servizio stesso.

In tal modo il nostro web server non si appesantirà e il flusso video verrà gestito da YouTube, la più grande piattaforma video del mondo e tutti i problemi tecnici di gestione (banda, transcodifiche, eventuali bitrate-shifting, player flash..) saranno a carico loro, a costo zero! Ci sono anche numerose possibilità di customizzazione delle funzionalità relative alla piattaforma adottata, a tal proposito vedi il nostro articolo specifico:
[VEDI ARTICOLO → “You Tube embedding”]

In alternativa possiamo valutare la posssibilità di caricare e conservare i video in un nostro server dedicato allo scopo o eventualmente nello stesso server che gestisce le pagine web del nostro sito. Questa opzione la chiameremo self-hosting.

La schematizzazione secondo cui il self-hosting è professionale mentre l’embedding è adatto a siti o blog personali o amatoriali, è una semplificazione errata. Il modo corretto di analizzare la questione è, come sempre, valutare vantaggi e svantaggi delle due soluzioni:

Embedding, vantaggi:embedding

  1. gratuito
  2. ottimizzato per massima audience (tag, keyword, motori di ricerca..)
  3. nessun problema di formato video o codifica
  4. tecnologia al top per tutte le funzionalità del player video (caricamento, visualizzazione, ecc..)

 

Embedding, svantaggi:

  1. perdita del controllo sui contenuti pubblicati: possono essere rimossi o bloccati sulla base di criteri loro
  2. perdita del controllo dell’audience (i video potranno essere visionati direttamente dalla piattaforma su cui sono caricati..)
  3. pubblicità indesiderata
  4. le piattaforme gratuite (es. You Tube) di solito consentono personalizzazioni limitate del player (resta il loro logo)

 

Self-host, vantaggi:

  1. pieno controllo dei video
  2. no pubblicità indesiderata
  3. custom player

 

Self-host, svantaggi:

  1. costi
  2. complessità tecnica di implementazione e configurazione del sistema
  3. visibilità SEO (You Tube è di Google!)

 

Un compromesso molto interessante e molto utilizzato a proposito dell’embedding, in grado di ovviare ai principali svantaggi senza caricarsi degli svantaggi del self-host, è l’utilizzo di servizi a pagamento, come ad esempio Vimeo Plus, tra quelli economici (circa 50€/anno), oppure Ooyala, tra quelli più costosi. Servizi a pagamento offrono funzionalità extra, aumento dello spazio di storage, rimozione di limitazioni alla customizzazione del player e rimozione della pubblicità, convergenza tra device, integrazione con i social media, ecc..

vimeoYou Tube incredibilmente non offre servizi a pagamento ed è totalmente e sempre gratuito, ma offre comunque caratteristiche del servizio molto interessanti, come ad es. durata illimitata e 2GB di spazio per ogni video! Mentre la versione gratuita di Vimeo ha limiti molto più evidenti (500MB a settimana) ma con soli 50€/anno si può eccedere alle funzionalità plus (vedi schermata).

 

 

[toggle title=”Link ad Articoli correlati” type=”1″ open=”1″]
[VEDI ARTICOLO → “streaming RTMP vs download progressivo”]
[VEDI ARTICOLO → “pseudo streaming HTTP”]
[/toggle]

pseudostreaming HTTP

Parliamo degli aspetti tecnici di una piattaforma video online on-demand, ovvero di un servizio in Rete che fornisce video su richiesta fruibili da un archivio di contenuti pre-registrati. La soluzione più semplice è quella di rivolgersi ad un video host providers: ce ne sono molti, sia gratuiti (You Tube su tutte) che a pagamento (dai più economici come Vimeo Plus, ai più costosi come Ooyala).
[VEDI IL NOSTRO ARTICOLO → “streaming RTMP vs download progressivo”]

In questo articolo prenderemo in considerazione il caso in cui volessimo noi stessi diventare fornitori del servizio, implementando un video server dedicato allo streaming specifico per la distribuzione di video in tempo reale. Dovremmo in tal caso necessariamente affrontare la parte tecnica ed entrare nel vivo dei meccanismi di funzionamento di uno streaming.

Tale server dovrebbe gestire tutta la parte di distribuzione video attraverso un protocollo come l’RTSP (Real Time Streaming Protocol) in grado di gestire richieste dei client (come play, pause, ecc..) tipiche dei contenuti video, i quali essendo un flusso di dati continuo in real time, sono gestiti in modo ottimale, a livello di trasporto, dal protocollo UDP, su cui l’RTSP si appoggia.
Ad esempio, per il formato QuickTime, potremmo usare QuickTime Streaming Server o l’alternativa Open Source Darwin Streaming Server, così come lo stesso popolare software VLC (che funziona sia da client che da server). Tuttavia noi qui ci occuperemo del formato Flash (estensione dei file FLV), per il quale il protocollo per lo streaming video è l’RTMP (Real Time Messaging Protocol) sviluppato prima da Macromedia poi da Adobe e basato a livello di trasporto sul protocollo TCP. E’ implementato da software quali Adobe Flash Media Server, o l’alternativa Wowza.

streaming1Un normale web server gestisce contenuti (iper) testuali, ovvero richieste da parte di un client di pagine web collegate tra loro, attraverso lo standard del protocollo HTTP (che si appoggia a livello di trasporto al protocollo TCP). Tale protocollo pur non essendo pensato per lo streaming, potrebbe comunque essere sufficiente a gestire la nostra piattaforma video on-demand, evitandoci il costoso (acquisto o noleggio di un server dedicato) e i relativi complessi interventi di configurazione.
La condizione, ovviamente, è che la nostra piattaforma sia esclusivamente on-demand. In tal caso il protocollo HTTP gestito dal nostro web server (Apache o IIS, ad esempio) potrebbe comunque consentire la visione dei video attraverso la modalità de cosiddetto download progressivo con il quale, il download parte subito e anche la visualizzazione, ma bisogna attendere la “bufferizzazione” (ovvero il caricamento in locale) di una determinata parte del video, prima di poter saltare da un punto all’altro della stesso: il caricamento prosegue progressivamente (in base alla banda della connessione e al bitrate di codifica del file video). Questa funzionalità dello streaming detta random access (accesso casuale), ovvero la possibilità di saltare a qualsiasi parte del video in ogni momento, SENZA che il video venga bufferizzato, ovvero caricato in locale (chiunque abbia visto un video su You Tube o Vimeo lo ha sperimentato).
[VEDI IL NOSTRO ARTICOLO → “streaming RTMP vs download progressivo”]

Tuttavia è proprio questo il caso in cui vi è la possibilità di utilizzare una soluzione che unisce i vantaggi del download progressivo (semplicità e costo quasi zero) a quelli dello streaming (in particolare il random access). Tale soluzione si chiama (pseudo) streaming HTTP.

Si tratta di una sorta di simulazione dello streaming reale (appunto pseudo) che si appoggia al protocollo HTTP, dunque ad un classico web server come Apache a cui va aggiunto un piccolo script PHP, come xmoov, che gestisca le funzionalità del random access ai video richiesti .

Per realizzare ciò abbiamo bisogno di due cose:

  • il meta data injection nei file video distribuiti
  • Un semplice script in PHP da aggiungere alla nostra pagina web che gestisca tali informazioni, come xmoov.

Vediamo il  punto 1.
Per poter essere distribuito sul web un video deve essere codificato correttamente (encoding) in un formato adatto come Flash Video (FLV con codec H.263 o H.264) a tale scopo esistono molte soluzioni software (Sorenson Squeeze, Adobe Media Encoder, FFmpeg, ecc..). I file video così ottenuti hanno anche dei metadati (informazioni sul file in formato xml), indispensabili al player video per poter saltare da un punto all’altro del video. Ma alcuni programmi di encoding, come FFmpeg, mettono alla fine del file video i metadati, costringendo il player al caricamento dell’intero file. Al contrario sarà necessario collocare tali dati ALL’INIZIO del file in modo che il player da subito saltare in avanti nella timeline e richiedere la posizione della keyframe più vicina dai metadati e passarla al server, il quale invierà il file a partire da tale posizione.
Possiamo usare il software FLV MetaData Injector (FLVMDI) scaricabile da qui.

Vediamo il punto 2.
Esso è da eseguire nel caso la nostra pagina web sia gestita da un web server generico come Apache. Se abbiamo la possibilità di scegliere un web server da installare potremmo usare, ad esempio, LightTPD che incorpora nativamente le funzionalità di streaming e il random access.
Una volta che il nostro file video è stato “trattato” (vedi punto 1) avrà incorporati i meta tag relativi alle informazione di tempo che saranno interpretabili dal nostro script PHP xmoov.php (scaricabile da qui) rilasciato sotto licenza Creative Commons e che gira su “normali” server con PHP 4 (o superiori). Cosa fa tale script? Trasforma il nostro web server in una sorta di server di streaming, facendo essenzialmente 3 cose:

  • gestisce le richieste dal player, adeguando la qualità video alla larghezza di banda del client (bandwidth throttling)
  • inibisce la memorizzazione delle informazioni del filmato nella cache del browser
  • gestisce la funzionalità random access

In tal modo saremo in grado di gestire a richiesta al server dei video attraverso xmoov e a partire da un certo punto (keyframes) del filmato e potremo passare direttamente la richiesta dal browser via GET in modo simile a questo:

http://openstream.tv/xmoov.php?file=AEF2012-3.flv

Il video in questione è gestito analogamente a quanto avviene nel più importante server di streaming del mondo: You Tube. Il video relativo all’URL seguente viene gestito dalla piattaforma YouTube attraverso le due variabili GET, “v” e “t”. E sarà il video identificato dalla variabile “v” e partirà non dall’inizio, bensì dalla posizione indicata dalla variabile “t”, ovvero a 1′ e 28”:

http://www.youtube.com/watch?v=o322TIvmqtc&t=1m28s

E’ necessario fare alcune configurazioni di base di xmoov editando tale file, la principale delle quali è l’indicazione della directory dove sono presenti i file video:
define('XMOOV_PATH_FILES', 'video/');
Questa è la parte più delicata della configurazione dello script in quanto a volte crea problemi l’indicazione del percorso in termini assoluti o relativi. Consiglio di fare alcune prove..
Lo scopo è quello di arrivare ad avere una piattaforma video on-demand che funzioni con la stessa logica di You Tube, ovvero che gestisca i video attraverso il passaggio di una semplice variabile GET con il nome del file video conservato nel server. Nell’esempio sotto, tale variabile è “video”:

http://openstream.tv/xmoov.php?file=sigla.flv
http://openstream.tv/xmoov.php?file=jingle.flv

Tali url consentiranno al nostro browser di aprire il player video predefinito e visualizzare il file video indicato. Nel mio caso il sistema lancia di default VLC..
Ovviamente è anche possibile fare l’embedding del player all’interno della pagina HTML con il “vecchio sistema”, incorporando il codice.

Nota importante: Nel caso in cui disponiamo dell’accesso al server in modo da poter installarci software (se ad esempio abbiamo un server dedicato o un VPS), è possibile aggiungere moduli ad Apache e dunque funzionalità ulteriori, quali ad es.:

  • l’installazione degli applicativi FFmpeg e Flvtool2 nel server provvederà alla codifica corretta in automatico dei file caricati nella piattaforma e all’inserimento dei metadati, in modo da evitare di doverlo fare manualmente lato client
  • l’installazione del modulo di Apache mod_h264_streaming consentirà la gestione dei file con estensione mp4. Per l’installazione e configurazione di tale modulo vedi, ad esempio, questo articolo.
  • E’ anche possibile installare il modulo mod_flvx che serve a far gestire direttamente ad Apache lo pseudostreaming dei file flv (grossomodo assolve alle funzioni viste sopra per lo script xmoov.php). Per le istruzioni di installazioni vedi questo articolo.

 

A questo punto non resta che un ultimo passaggio: l’aggiunta nella pagina HTML del codice Javascript che genera il player SWF, che farà da contenitore dei nostri file video.

Vediamo quanto spiegato come si implementa nella pratica a livello di codice. Il codice seguente fa riferimento all’ottimo flashpalyer JWplayer e al relativo file jwplayer.js che dovremo caricare nel nostro server assieme ovviamente al file SWF relativo al player flash (vedi sito del JWplayer qui). Il codice javascript definisce le cosiddette flashvar, le variabili che intervengono sui parametri del nostro streaming, in particolare, le due essenziali sono l’indirizzo del file SWF del player e quello del file video:
'flashplayer': "http://openstream.tv/players/video/OSplayer.swf",
'file': "http://openstream.tv/MULTIMEDIA/video/test.mp4"

 

Vediamo un esempio di codice completo e il relativo risultato.

Pseudostreaming HTTP

[wp-js-fiddle url=”http://jsfiddle.net/molven/AADEJ/” style=”width:100%;height:400px;border:solid #4173A0 1px;”]