Implementazione dei video nei siti Web e siti mobili

I siti Web, i siti mobili e le applicazioni desktop accedono al contenuto del server Dynamic Media Classic, inclusi i video, utilizzando stringhe URL o codice incorporato. Dynamic Media Classic attiva queste stringhe URL durante il processo di pubblicazione. Per inserire la stringa URL o il codice da incorporare per il video nelle pagine Web, nelle pagine mobili e nelle applicazioni desktop, copiatela da Dynamic Media Classic.

Pubblicazione dei video

La pubblicazione di un video consente ai server Dynamic Media Classic di distribuire i video al sito Web, al sito mobile o all’applicazione.

Esistono due metodi diversi per pubblicare un video:

• Pubblicare automaticamente i video in fase di caricamento

  Come parte del processo di caricamento dei video, Dynamic Media Classic può pubblicare automaticamente i video quando vengono caricati e codificati. Grazie a questa possibilità di pubblicazione immediata, non è necessario pubblicare separatamente i video in un secondo tempo.

• Pubblicare i video manualmente dopo il caricamento

  Se non desiderate pubblicare subito i video, potete pubblicarli manualmente in qualsiasi momento.

Dopo aver pubblicato i video, Dynamic Media Classic attiva le stringhe URL per la pagina HTML o il codice dell’applicazione.

Per pubblicare i video

1. Effettuate una delle seguenti operazioni:

   • Per pubblicare automaticamente i video in fase di caricamento, nella schermata Carica fate clic su Pubblica dopo il caricamento. È tutto, non sono necessari ulteriori passaggi.
   • Per pubblicare i video manualmente in un secondo tempo dopo il caricamento, nel pannello Sfoglia selezionate i video e fate clic su Pubblica nella barra di navigazione globale.

Collegamento di un URL per video a un sito mobile o a un sito Web

Dopo aver pubblicato un video, potete ottenerne l’URL da usare in un sito Web, un sito mobile o in un’applicazione desktop. Usate l’URL del video per visualizzare il video in una finestra a comparsa o modale sopra alla pagina Web.

Quando un cliente fa clic sul collegamento, vengono automaticamente rilevati il tipo di dispositivo, la larghezza di banda e le dimensioni dello schermo. Viene visualizzato il video corretto da riprodurre con un visualizzatore predefinito per desktop o sul lettore nativo del dispositivo smartphone e tablet.

Consultate anche Incorporamento di un visualizzatore video in una pagina Web.

Per collegare l’URL di un video a un sito mobile o a un sito Web

1. Nel pannello delle risorse, nell’elenco a discesa Mostra, fate clic su Video o Set video adattivo.

2. Nel pannello Libreria risorse a sinistra, individuate la cartella di risorse che contiene il video o set di video adattivi che desiderate collegare.

3. Sopra il pannello delle risorse, sul lato destro della barra degli strumenti, effettuate una delle seguenti operazioni:

   • Fate clic su Visualizzazione griglia o Visualizzazione elenco. Nella finestra delle risorse, fate doppio clic sulla miniatura video di una singola risorsa per aprirla in visualizzazione Dettagli. Nel pannello URL e codice da incorporare a destra, nella sezione Streaming HTTP, fate clic su Copia URL a destra del visualizzatore desiderato. Come procedura ottimale, copiate l'URL associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione griglia. Nel pannello delle risorse, selezionate una singola risorsa, quindi, sotto la miniatura, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Copia URL. Come procedura ottimale, copiate l'URL associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione elenco. Nel pannello delle risorse, selezionate una singola risorsa, quindi, a destra della miniatura, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Copia URL. Come procedura ottimale, copiate l'URL associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione griglia, Visualizzazione elenco o Visualizzazione dettagli. Nella stessa barra degli strumenti, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Copia URL. Come procedura ottimale, copiate l'URL associato al visualizzatore Universal_HTML5_Video.

4. Inserite il collegamento URL per il video HTML5 nel sito Web e nel sito mobile.

Incorporamento di un visualizzatore video in una pagina Web

Per riprodurre il video incorporato nella pagina Web, utilizzate la funzione Incorpora codice. Puoi copiare il codice da incorporare negli Appunti, per poi incollarlo nelle pagine web. La modifica del codice non è consentita nella finestra di dialogo Incorpora codice.

Consultate anche Collegamento di un URL per video a un sito mobile o a un sito Web.

Per incorporare il visualizzatore video in una pagina Web

1. Nel pannello delle risorse, nell’elenco a discesa Mostra, fate clic su Video o Set video adattivo.

2. Nel pannello Libreria risorse a sinistra, individuate la cartella di risorse che contiene il video o set video adattivo di cui desiderate copiare il codice da incorporare.

3. Sopra il pannello delle risorse, sul lato destro della barra degli strumenti, effettuate una delle seguenti operazioni:

   • Fate clic su Visualizzazione griglia o Visualizzazione elenco. Nella finestra delle risorse, fate doppio clic sulla miniatura video di una singola risorsa per aprirla in visualizzazione Dettagli. Nel pannello URL e codice da incorporare a destra, in Streaming HTTP, fate clic su Incorpora codice a destra del visualizzatore desiderato. Come procedura ottimale, fate clic su Incorpora codice associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione griglia. Nel pannello delle risorse, selezionate una singola risorsa, quindi, sotto la miniatura video, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Incorpora codice. Come procedura ottimale, fate clic su Incorpora codice associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione elenco. Nel pannello delle risorse, selezionate una singola risorsa, quindi, a destra della miniatura, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Incorpora codice. Come procedura ottimale, fate clic su Incorpora codice associato al visualizzatore Universal_HTML5_Video.

   • Fate clic su Visualizzazione griglia, Visualizzazione elenco o Visualizzazione dettagli. Nella stessa barra degli strumenti, fate clic su Anteprima > Elenco visualizzatori.

     Nella pagina Elenco visualizzatori, nella colonna Azioni della tabella, fate clic su Incorpora codice. Come procedura ottimale, fate clic su Incorpora codice associato al visualizzatore Universal_HTML5_Video.

4. Nella finestra di dialogo Codice da incorporare, fate clic su Copia negli Appunti.

   La modifica del codice non è consentita nella finestra di dialogo Codice da incorporare.

5. Fai clic su Chiudi.

6. Incollate il codice da incorporare nelle pagine Web.

Implementazione del codice da incorporare per utilizzare video HTML5 con risorse video MP4

Se non usate il lettore video Dynamic Media Classic HTML5, ma desiderate utilizzare il tag nativo HTML5 <video> con risorse video MP4, potete usare il seguente esempio di codice da incorporare:

<video poster="S7 video thumbnail URL" controls> 
        <source src="S7 OGG video asset URL (no player)" type='video/ogg; codecs="theora, vorbis"'/> 
        <source src="S7 MP4 mobile progressive video asset URL (no player)" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> 
        <p>This is fallback content</p> 
</video>

• Sostituite "S7 video thumbnail URL" con l’URL della miniatura del video. Si tratta della miniatura del video che l’utente vede prima che venga riprodotto il video.

  Consultate Reperimento degli URL delle miniature video.

• Sostituite "S7 OGG video asset URL (no player)" con l’URL progressivo del video OGG.

  Consultate Collegamento di un URL per video a un sito mobile o a un sito Web.

• Sostituite "S7 MP4 mobile progressive video asset URL (no player)" con l’URL progressivo mobile del video.

  Consultate Collegamento di un URL per video a un sito mobile o a un sito Web.

Implementazione di video mediante un lettore video di terze parti

Se utilizzate un lettore video di terze parti o personalizzato anziché un visualizzatore video Dynamic Media Classic, potete ottenere l’URL video diretto che funziona per lo streaming video con bitrate multiplo HLS o per il download progressivo.

Per implementare video mediante un lettore video di terze parti

1. In Dynamic Media Classic, nella barra di navigazione globale, fate clic su Configurazione > Impostazione applicazione > Impostazioni generali.
2. A seconda del tipo di URL che desiderate usare, effettuate una delle seguenti operazioni:

• Per generare un URL diretto per lo streaming video HLS (bitrate multiplo)

  Nella pagina Impostazioni generali applicazione, nel gruppo Server, nel campo di testo Nome server pubblicato, create l'URL diretto utilizzando la sintassi seguente: server/is/content/company/folder/filename.m3u8
  Ad esempio, se il nome del server pubblicato è https://s7d9.scene7.com/. Utilizzando la sintassi del passaggio 2, l’URL diretto potrebbe essere simile al seguente:
  https://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8

• Per generare un URL diretto per lo streaming video HLS (bitrate singolo)

  Nella pagina Impostazioni generali applicazione, nel gruppo Server, nel campo di testo HLS Streaming Server Name, generare l'URL diretto utilizzando la sintassi seguente:
  server/company/folder/filename.ext.m3u8
  Ad esempio, se il nome del server di streaming HLS è https://s7mbrstream.scene7.com/hls-vod/. in base alla sintassi del punto 2 l’URL diretto potrebbe essere:
  https://s7mbrstream.scene7.com/hls-vod/GeoRetail/MBR/ToyStory3\_Teaser1\_High\_iPad\_768x432\_1296K.mp4.m3u8

• Per generare un URL diretto per video progressivo

  Nella pagina Impostazioni generali applicazione, nel campo di testo Nome server video progressivo che si trova nel gruppo Server, create l’URL diretto con la sintassi seguente: server/company/folder/filename
  Ad esempio, se il nome del server video progressivo è https://s7d9.scene7.com/is/content/. in base alla sintassi del punto 2 l’URL diretto potrebbe essere:
  https://s7d9.scene7.com/e2/GeoRetail/SourceVideo/outdoors.mp4

Utilizzo delle miniature video

Dynamic Media Classic genera le miniature per i video codificati e per i video precodificati. Potete usare le miniature video come qualsiasi altra risorsa di immagini. Inoltre, potete ottenere gli URL per le miniature video generate da Dynamic Media Classic e implementarli al di fuori di Dynamic Media Classic. Ad esempio, potete implementare le miniature nei risultati di ricerca, negli elenchi dei relativi video e negli elenchi di riproduzione video pubblicati in un sito Web.

Le miniature vengono generate in base al primo fotogramma eterogeneo (fotogramma che non sia tutto nero, tutto bianco e così via) del video.

Reperimento degli URL delle miniature video

Dynamic Media Classic genera automaticamente le miniature video durante il processo di caricamento. Le miniature vengono visualizzate nel pannello Sfoglia in visualizzazione Elenco e Griglia.

Per generare gli URL delle miniature video, effettuate un’operazione di pubblicazione.

Consultate Pubblicazione dei video.

Una volta effettuata la pubblicazione, potete reperire gli URL delle miniature video nella visualizzazione Dettagli del pannello URL e codice da incorporare. Fate clic su Copia URL a destra della miniatura del video miniatura per copiarne l’URL.

Modifica dei fotogrammi poster nei visualizzatori video

Il fotogramma poster è il fotogramma iniziale che viene visualizzato nei visualizzatori per video prima che venga riprodotto il video. Dynamic Media Classic utilizza le miniature video come fotogrammi poster.

Potete applicare al fotogramma poster i modificatori di immagini. Ad esempio, potete ritagliare il fotogramma poster o renderlo trasparente. Per modificare il fotogramma poster, aprite la schermata di configurazione del visualizzatore per video e inserite i modificatori nella sezione Modificatori immagini poster.

Consultate Aggiunta o modifica di un predefinito per visualizzatori video

Vedere www.adobe.com/go/learn_s7_image_server_guide_en.

Potete inoltre modificare le miniature video aggiungendo dei modificatori ai relativi URL.