Riproduzione di elementi multimediali, dall'inizio alla fine (HTML)

Articolo
12/11/2015

[ 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 ]

Scopri come creare app multimediali elaborate per Windows 8.1 in grado di riprodurre audio e video, oltre a preservare la durata della batteria e ottimizzare il rendering.

Vedremo tutti i passaggi della creazione di un'app di Windows Store ricca di funzionalità multimediali con JavaScript. In Windows 8.1 sono stati introdotti molti miglioramenti che rendono più semplice che mai ottenere questo risultato, come la nuova API msRequestFullscreen. Parleremo degli aspetti seguenti:

Operazioni fondamentali per la riproduzione di elementi multimediali, come l'uso degli elementi HTML audio e video, l'abilitazione dei controlli di trasporto e il caricamento di file multimediali dal dispositivo o dalla rete.
Funzionalità per la riproduzione di elementi multimediali, ad esempio impedire in modo corretto l'attenuazione dello schermo, riprodurre audio in background, interagire con i controlli di trasporto multimediale di sistema, ridimensionare i video, creare controlli di trasporto personalizzati e abilitare il rendering a finestra intera.
Operazioni principali per l'app, come mantenere lo stato dell'app, creare elementi di interfaccia utente nella barra dell'app e creare riquadri a comparsa delle impostazioni.

Se non hai familiarità con lo sviluppo di app di Windows Store con JavaScript, leggi Creare la prima app di Windows Store in JavaScript per imparare rapidamente a muovere i primi passi.

Ogni passaggio di seguito è collegato a un argomento con istruzioni, quindi segui i link se ti servono altre info.

L'esempio sulla riproduzione multimediale include tutti gli elementi di cui parleremo in questo argomento. Faremo spesso riferimento a questo esempio correlato, segnalando le posizioni in cui sono implementate funzionalità specifiche.

Cattura di schermata dell'app di esempio per la riproduzione multimediale

Creare un'app multimediale

Creare l'esempio

Se vuoi seguire i passaggi descritti in questo argomento per aggiungere funzionalità multimediali alla tua app, puoi iniziare con l'argomento Navigazione semplice, dall'inizio alla fine e il modello associato Modello di navigazione semplice. In alternativa, puoi creare un progetto di app di navigazione o app vuota di Windows Store in Microsoft Visual Studio. Anche se l'esempio correlato include una struttura di navigazione semplice, usa alcune delle funzioni helper in navigation.js,, che non è incluso nel modello vuoto. Potrebbe quindi essere più facile partire da uno dei modelli di navigazione e rimuovere gli elementi non necessari.

In alternativa, passa direttamente all'esempio sulla riproduzione multimediale.

L'esempio correlato implementa tutti i passaggi seguenti, ma non esamineremo il codice in dettaglio per mantenere fluida la presentazione. Per ogni passaggio è disponibile una sezione "Posizione nell'esempio" per facilitare l'individuazione rapida del codice corrispondente.

La struttura dei file sorgente dell'esempio è semplice e lineare, in modo che tu possa trovare facilmente il codice senza dover esplorare più livelli di file. Potresti comunque preferire una suddivisione e un'organizzazione diverse per il tuo progetto.

Operazioni fondamentali per la riproduzione di elementi multimediali

	Guida introduttiva: Riproduzione di video in un'app Prepara gli elementi di base per l'uso di video nella tua app. Questo argomento con istruzioni pratiche descrive in dettaglio come eseguire queste operazioni, ma per ottenere funzionalità semplici di riproduzione audio e video, è sufficiente aggiungere un elemento audio o video al codice HTML e impostare la proprietà src su un file multimediale. Per controllare la riproduzione multimediale, usa i controlli di trasporto predefiniti aggiungendo l'attributo controls all'elemento audio o video. Abilita e disabilita i controlli impostando la proprietà controls su true o false. I controlli di trasporto rendono disponibili elementi di interfaccia utente comuni per i contenuti multimediali, come il pulsante Play e i controlli del volume. Ecco qual è l'aspetto di questi controlli nell'esempio. Posizione nell'esempio: l'elemento video è denominato mediaVideo ed è definito nel codice HTML nel file \pages\mediaPlayer\mediaPlayer.js.
	Formati audio e video supportati Le app di Windows Store scritte in JavaScript supportano numerosi formati audio e video. Fai clic sul link per visualizzare l'elenco completo.
	Come aprire file multimediali locali mediante il controllo FileOpenPicker La riproduzione degli elementi multimediali a questo punto è pronta. Impostiamo ora l'origine multimediale mentre l'app è in esecuzione. Il controllo FileOpenPicker consente all'utente di selezionare un file dal file system locale o da Microsoft OneDrive. Questo passaggio mostra come configurare il controllo FileOpenPicker e come impostare la proprietà video.src sul file restituito da FileOpenPicker. Usa StorageApplicationPermissions.futureAccessList per archiviare le autorizzazioni per i file aperti con FileOpenPicker. La tua app può quindi accedere ai file in seguito, ad esempio dopo il ripristino dell'app da uno stato di chiusura. Il controllo FileOpenPickerha questo aspetto. Il controllo FileOpenPicker non richiede dichiarazioni delle funzionalità per le cartelle di sistema come Musica, Video e Documenti, perché è l'utente ad avere il controllo totale di FileOpenPicker e dei file aperti. Per motivi di sicurezza e di privacy, la tua app dovrebbe dichiarare il minor numero di funzionalità possibile. Se vuoi però che la tua app possa accedere alle cartelle Video e Musica senza l'input dell'utente, ad esempio per visualizzare tutte le copertine di album nella cartella Musica, devi dichiarare le funzionalità corrispondenti. Per altre info, vedi Dichiarazioni di funzionalità delle app. Posizione nell'esempio: cerca le funzioni `setMediaSourceFromFilePicker` e `setMediaSourceFromFile` in \pages\mediaPlayer\mediaPlayer.js e il pulsante della barra dell'app `browseButton` in \pages\mediaPlayer\mediaPlayer.html.
	Come aprire file multimediali dalla rete Il controllo FileOpenPicker è più che adatto per il recupero di un file nel sistema locale, ma non funziona per l'impostazione dell'origine multimediale su un file nella rete. Per eseguire questa operazione, imposta semplicemente src sul percorso del file multimediale in rete. Posizione nell'esempio: cerca le funzioni `setMediaSourceFromTextBox` e `setMediaSourceFromPath` in \pages\mediaPlayer\mediaPlayer.js. Cerca anche l'elemento input `txtSourceInput` in \pages\mediaPlayer\mediaPlayer.html, usato per l'immissione del percorso multimediale.

Funzionalità per la riproduzione di elementi multimediali

	Come mantenere attiva la visualizzazione durante la riproduzione audio/video In genere, quando un'app di Windows Store non rileva l'input dell'utente entro un determinato periodo di tempo, lo schermo si attenua e infine si spegne. In molte app si tratta di una buona cosa, essendo pensata per risparmiare energia e migliorare la durata della batteria. In molte app multimediali, però, vogliamo evitare l'attenuazione dello schermo perché è probabile che qualcuno stia guardando il video. Usa la classe System.Windows.Display.DisplayRequest per comunicare al sistema di mantenere sempre attivo lo schermo per la tua app. Assicurati però di annullare questa richiesta non appena non è più necessario per la tua app, ad esempio quando viene sospesa, al termine della riproduzione del file multimediale o in caso di sospensione della riproduzione. Il mancato annullamento di questa richiesta comporta uno spreco nell'uso della batteria. Se il rendering a finestra intera viene abilitato tramite il pulsante corrispondente nei nuovi controlli di trasporto o tramite la funzione msRequestFullscreen, il sistema gestisce automaticamente la disabilitazione e la riabilitazione dell'attenuazione dello schermo. Se per la tua app è necessario disabilitare l'attenuazione dello schermo solo nella modalità a finestra intera, quindi, non dovrai gestire tu DisplayRequest. Posizione nell'esempio: vedi la funzione `setScreenDimming` in \pages\mediaPlayer\mediaPlayer.js.
	Come usare i controlli del trasporto multimediale di sistema Windows 8.1 introduce una nuova classe per le interazioni con i controlli di trasporto multimediale di sistema. Da ora in poi usa SystemMediaTransportControls invece della vecchia classe MediaControl. I controlli di trasporto multimediale di sistema sono diversi da quelli nell'oggetto multimediale HTML. Si tratta dei controlli che vengono visualizzati quando si premono i tasti multimediali sull'hardware, come il controllo del volume sulle cuffie oppure i pulsanti multimediali in alcune tastiere. La tua app può registrarsi per l'uso di questi controlli e anche restituire metadati multimediali, come copertine degli album e titoli di brani, da visualizzare con i controlli. Ecco un'immagine dei controlli. Posizione nell'esempio: vedi le funzioni `WinJS.UI.Pages.define`, `setupSystemMediaTransportControls` e `systemMediaControlsButtonPressed` in \pages\mediaPlayer\mediaPlayer.js. Vedi anche i gestori eventi `mediaPlaying`, `mediaPaused` e `mediaEnded` in \pages\mediaPlayer\mediaPlayer.js.
	Come riprodurre audio in background. Configuriamo ora il supporto per la riproduzione di audio in background, in modo che gli utenti possano ascoltare musica con la tua app mentre interagiscono con un'app diversa. Quando un'app per la riproduzione di audio viene spostata in background, ad esempio quando l'utente passa a un'altra app, il comportamento predefinito prevede l'interruzione dell'audio. Un'app per la musica, però, potrebbe scegliere di continuare la riproduzione. Per riprodurre l'audio in background devi impostare l'attività audio in background nella sezione delle dichiarazioni del manifesto dell'app. Devi anche abilitare le proprietà isPlayEnabled e isPauseEnabled in SystemMediaTransportControls e gestire l'evento buttonpressed. Queste operazioni sono necessarie in modo che l'utente abbia la possibilità di riprodurre o interrompere l'audio quando la tua app non è quella attiva. Posizione nell'esempio: vedi l'elemento video in \pages\mediaPlayer\mediaPlayer.html, la funzione `setupSystemMediaTransportControls` in \pages\mediaPlayer\mediaPlayer.html e cerca la sezione delle dichiarazioni di package.appmanifest.xml per abilitare l'attività in background.
	Come abilitare il rendering a finestra intera I controlli di trasporto predefiniti per gli oggetti audio e video includono un pulsante per la modalità a finestra intera. Se vuoi abilitare o disabilitare il rendering a finestra intera a livello di programmazione, usa la nuova funzione msRequestFullscreen. Prima di Windows 8.1 era necessario calcolare i limiti della finestra intera e configurare manualmente gli altri elementi di interfaccia utente da visualizzare e nascondere. Se queste configurazioni non sono corrette, alcune ottimizzazioni di rendering potrebbero non essere abilitate. Per questi motivi, è sempre consigliabile usare la funzione msRequestFullscreen per abilitare e disabilitare il rendering a finestra intera. Oltretutto, è anche più facile. Posizione nell'esempio: vedi la funzione `fullScreenMedia` in \pages\mediaPlayer\mediaPlayer.js.
	Come creare controlli del trasporto personalizzati Se è necessario ampliare le funzionalità offerte dai controlli di trasporto audio e video oppure sei vuoi sostituirli del tutto, dovrai creare controlli di trasporto personalizzati. Nell'esempio sulla riproduzione multimediale tutti i controlli di trasporto personalizzati sono implementati in AppBar, ma i controlli di trasporto predefiniti sono lasciati abilitati. Se decidi di creare controlli di trasporto personalizzati, potresti preferire semplicemente la sostituzione dell'interfaccia predefinita con la tua personalizzata. Per disattivare i controlli di trasporto predefiniti, imposta controls su false. In questo argomento con istruzioni pratiche viene descritta la procedura per la creazione di controlli di trasporto personalizzati per riproduzione, pausa, interruzione, avanzamento rapido, riavvolgimento, posizionamento del dispositivo di scorrimento, finestra intera, sezione audio, disattivazione del volume e regolazione del volume. Posizione nell'esempio: vedi gli elementi AppBar in \pages\mediaPlayer\mediaPlayer.html e vedi \pages\mediaPlayer\mediaPlayer.js per i gestori eventi che implementano le funzionalità.

Operazioni principali per l'app

Aggiunta di barre dell'app

Posiziona gli elementi dell'interfaccia utente che interagiscono con l'app e gli oggetti audio e video nelle barre dell'app tramite WinJS.UI.AppBar. I controlli WinJS.UI.AppBarCommand sono progettati appositamente per AppBar e hanno un funzionamento ottimale. Sono disponibili i tipi di controllo seguenti: "button", "toggle", "flyout", "separator" e "content".

L'enumerazione WinJS.UI.AppBarIcon contiene numerosi simboli utilizzabili per AppBarCommand.icon. Puoi anche usare un file PNG (Portable Network Graphics) personalizzato.

Ecco l'aspetto dell'AppBar inferiore nell'esempio correlato.

AppBar con AppBarButton

L'esempio correlato usa i riquadri a comparsa per il controllo di selezione della traccia audio e il controllo del volume. In questo modo si riesce a risparmiare spazio.

Per info sull'uso di AppBar e sulla progettazione dell'app, vedi Linee guida per le barre dell'app.

Posizione nell'esempio: vedi gli elementi <div id="appBarTop" e <div id="appBarBottom"in \pages\mediaPlayer\mediaPlayer.html. Se vuoi scoprire come si implementa un controllo o una funzionalità particolare, esamina i gestori eventi per i pulsanti della barra dell'app in \pages\mediaPlayer\mediaPlayer.js.

Gestire il ciclo di vita e lo stato delle app

Il salvataggio dello stato dell'app per le app di Windows Store è un passaggio importante, perché l'app può essere sospesa in background in qualsiasi momento e chiusa dal sistema. Alla ripresa dell'app, l'utente si aspetta in genere che gli elementi multimediali si trovino nella stessa posizione e che tutte le impostazioni dell'app siano state preservate.

Puoi salvare lo stato dell'app nello spazio di archiviazione isolato nel dispositivo oppure in risorse di archiviazione mobili. La scelta di risorse di archiviazione mobili è vantaggiosa, perché consente agli utenti di eseguire l'app su più dispositivi e di condividere lo stato con tutti.

Gli stati video importanti da salvare sono src, currentTime, loop, paused, ended, autoplay e qualsiasi audioTracks selezionato.

Il file navigation.js include funzioni helper per tutti i modelli di Visual Studio, ad eccezione del modello vuoto. Queste funzioni helper semplificano la gestione di sospensione, ripresa e ripresa dalla chiusura.

Alcuni stati multimediali devono essere ripristinati dopo il caricamento dell'elemento multimediale, ad esempio currentTime.

Posizione nell'esempio: vedi le funzioni app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded e appResumingFromSuspend in \pages\mediaPlayer\mediaPlayer.js. Nel file \js\default.js cerca la funzione app.onactivated.

Linee guida per le impostazioni dell'app

Usa il controllo WinJS.UI.SettingsFlyout per le app di Windows Store scritte in JavaScript.

Le impostazioni riguardano le opzioni di configurazione che influiscono sul comportamento dell'app nel complesso e che vengono modificate solo occasionalmente. L'esempio sulla riproduzione multimediale crea un riquadro a comparsa delle impostazioni per audio e video, che può essere usato per archiviare le impostazioni dell'app.

Posizione nell'esempio: vedi app.onactivated in \js\default.js. Le pagine di impostazioni audio.html, video.html, help.html e privacy.html sono incluse nella sottocartella \settings.

Operazioni finali

Uso del Kit di certificazione app Windows

Operazione consigliata. L'esecuzione del Kit di certificazione app Windows consente di assicurarti che la tua app soddisfi i requisiti per Windows Store. Ti consigliamo di eseguire queste verifiche ogni volta che aggiungi una funzionalità principale alla tua app.

Ecco fatto. Dopo aver esplorato varie funzionalità di riproduzione multimediale per la tua app, adesso sei pronto per creare un'app come quella dell'esempio sulla riproduzione multimediale.

Vuoi saperne di più?

Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Scopri altro sulla progettazione dell'interfaccia utente di app di Windows Store.

Interazioni con l'utente, dall'inizio alla fine

Scopri altro sull'aggiunta dell'input tocco alle app di Windows Store.

Roadmap per app di Windows Store scritte in JavaScript

Altre informazioni generali sulla creazione di app di Windows Store con JavaScript.

Progettazione dell'esperienza utente per le app

Scopri altro sulla progettazione di esperienze utente di grande impatto.

Formati audio e video supportati

Altre informazioni sui formati audio e video supportati nelle app di Windows Store scritte in JavaScript.

Prestazioni audio e video

Scopri di più sulle considerazioni relative alle prestazioni per le app multimediali.

Guida introduttiva: Aggiunta di controlli e stili WinJS

Altre informazioni sui controlli e gli eventi nelle app di Windows Store scritte in JavaScript.