Guida introduttiva: Riproduzione di video in un'app (HTML)

Articolo
02/12/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questo argomento mostra come usare l'elemento HTML5 Video per riprodurre un video in un'app di Windows Runtime scritta in JavaScript.

Per un altro esempio di utilizzo di contenuti audio e video in un'app di Windows Runtime scritta in JavaScript, vedi l'Esempio di riproduzione multimediale HTML.

Per informazioni sui formati multimediali audio e video supportati nelle app di Windows Runtime, vedi Formati audio e video supportati.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Store in JavaScript.

Istruzioni

1. Dichiarare la funzionalità client Internet

Apri il file manifesto dell'applicazione, package.appxmanifest.xml, e abilita Internet (Client) capability:

In Microsoft Visual Studio fai doppio clic sull'elemento package.appxmanifest in Esplora soluzioni per aprire la finestra di progettazione del manifesto dell'applicazione.
Fai clic su Funzionalità.
Seleziona la casella per la funzionalità Internet (Client) .

Questa funzionalità fornisce alle applicazioni l'accesso in uscita a Internet, necessario per riprodurre video da un URL Internet.

Nota Questa funzionalità non è necessaria per riprodurre file video locali.

2. Aggiungere l'elemento video

Apri il file HTML denominato Default.html e aggiungi l'elemento video al corpo del documento.

<body>
  <video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>

Sostituisci l'URL "https://www.contoso.com/clip.mp4" dell'esempio con un URL reale.

L'elemento Video offre un set di controlli di riproduzione incorporati che consentono all'utente di avviare o sospendere il video, trovare una nuova posizione e regolare il volume. I controlli di riproduzione non sono visibili per impostazione predefinita. Per abilitarli, basta aggiungere l'attributo controls, come illustrato. I controlli compaiono quando l'utente passa il mouse sopra il video.

3. Impostare la larghezza e l'altezza degli attributi

Se conosci già le dimensioni del video, è una buona idea impostare gli attributi width e height sull'elemento video. Questi attributi indicano le dimensioni del layout dell'elemento in pixel CSS. Durante il caricamento della pagina, viene riservato spazio per l'elemento. Se non specifichi gli attributi di larghezza e altezza, la pagina adatterà il contenuto dinamicamente dopo il download del video.

<body>
   <video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>

Gli attributi di larghezza e altezza sono sempre specificati in pixel CSS e non accettano un'unità. Ad esempio, "5cm" e "100%" non sono validi.

Se gli attributi di larghezza e altezza non corrispondono alle dimensioni intrinseche del video, il controllo video adatta il video, mantenendone le proporzioni mediante l'uso del formato 16:9, se necessario. Tuttavia, è meglio evitare di adattare il video, in quanto si potrebbero creare degli artefatti grafici. Quando possibile, la soluzione migliore è codificare il video in base alle dimensioni di visualizzazione desiderate.