Reproducción de multimedia, de principio a fin (HTML)

Crear la muestra

Si quieres seguir estos pasos para añadir características de medios a tu propia aplicación, puedes empezar con el tema Patrón de navegación plano, de principio a fin y el tema asociado Plantilla de patrón de navegación plano. También puedes crear un proyecto o un proyecto de navegación en blanco de la Tienda Windows en Microsoft Visual Studio. Aunque la muestra complementaria tiene una estructura de navegación sencilla, usa algunas de las funciones auxiliares de navigation.js, que no se incluyen en la plantilla en blanco. Así que puede resultar más fácil empezar con una de las plantillas de navegación y eliminar lo que no necesitas.

O bien, salta directamente a la muestra complementaria Reproducción de multimedia, de principio a fin.

La muestra complementaria implementa todos estos pasos, pero para no detenernos no repasaremos el código. Cada paso tiene una sección "Búscalo en la muestra" que te ayudará a encontrar el código rápidamente.

La estructura de los archivos fuente de la muestra es simple para que encuentres el código fácilmente sin tener que bucear entre varias capas de archivos fuente. Aunque quizás quieras reestructurar y organizar tu propio proyecto de forma diferente.

Inicio rápido: reproducir vídeo en una aplicación

Configura los pasos básicos para vídeo en tu aplicación. En este tema de procedimientos se describe cómo hacerlo, pero para reproducir audio y vídeo básico, solo tienes que añadir un elemento audio o video a tu HTML y definir la propiedad src en un archivo multimedia.

Para controlar la reproducción multimedia, usa los controles de transporte integrados agregando el atributo controls al elemento audio o video. Habilita y deshabilita los controles estableciendo la propiedad controls en true o false. Los controles de transporte proporcionan elementos comunes de la interfaz de usuario multimedia, como el botón reproducir y los controles de volumen. Este es el aspecto de esos controles en la muestra.

Búscalo en la muestra: el elemento video se llama mediaVideo y está definido en HTML en el archivo \pages\mediaPlayer\mediaPlayer.js.

Cómo abrir archivos multimedia locales con el control FileOpenPicker

Ahora que ya tenemos reproducción de multimedia, vamos a establecer el origen de multimedia mientras la aplicación se está ejecutando.

El control FileOpenPicker permite al usuario seleccionar un archivo del sistema de archivos local o de Microsoft OneDrive. Este paso muestra cómo configurar el FileOpenPicker y cómo establecer la propiedad video.src en el archivo que FileOpenPicker devuelve.

Usa StorageApplicationPermissions.futureAccessList para almacenar los permisos de los archivos que se abren con FileOpenPicker. Tu aplicación puede acceder a los archivos más adelante, por ejemplo, cuando la aplicación se restaure desde un estado de terminación.

El FileOpenPicker tiene este aspecto.

El FileOpenPicker no necesita que tu aplicación declare funcionalidades para carpetas del sistema como Música, Vídeos y Documentos. Esto se debe a que el usuario tiene el control total sobre el FileOpenPicker y sobre qué archivos se abren. Por motivos de seguridad y privacidad, tu aplicación debe declarar las menos funcionalidades posibles. Sin embargo, si quieres que tu aplicación tenga acceso a las carpetas Vídeos y Música sin la entrada del usuario — para mostrar todas las carátulas de los álbumes en la carpeta Música, por ejemplo — debes declarar las funcionalidades correspondientes. Para más información, consulta el tema sobre las declaraciones de funcionalidad de las aplicaciones.

Búscalo en la muestra: busca las funciones setMediaSourceFromFilePicker y setMediaSourceFromFile en \pages\mediaPlayer\mediaPlayer.js y el botón de la barra de aplicaciones browseButton en \pages\mediaPlayer\mediaPlayer.html.

Normalmente, cuando una aplicación de la Tienda Windows no detecta ninguna entrada del usuario durante un determinado período de tiempo, la pantalla se atenúa y termina por apagarse. En la mayoría de las aplicaciones esto está bien, porque ahorra energía y alarga la duración de la batería. Sin embargo, en muchas aplicaciones multimedia no queremos que la pantalla se atenúe porque probablemente alguien está viendo el vídeo.

Usa la clase System.Windows.Display.DisplayRequest para indicar al sistema que mantenga la pantalla siempre encendida para tu aplicación. Sin embargo, asegúrate de cancelar esta solicitud en cuanto la aplicación ya no la necesite, por ejemplo, cuando la aplicación esté suspendida, el archivo multimedia haya terminado de reproducirse o esté en pausa. Si no se cancela esta solicitud, se malgasta la batería.

Si la representación en ventana completa está habilitada a través del botón de ventana completa de los controles de transporte integrados o a través de la función msRequestFullscreen, el sistema administra automáticamente la deshabilitación y la rehabilitación de la atenuación de la pantalla. Por lo tanto, si tu aplicación necesita deshabilitar la atenuación de la pantalla solo en modo de ventana completa, no necesitas administrar DisplayRequest.

Búscalo en la muestra: busca la función setScreenDimming en \pages\mediaPlayer\mediaPlayer.js.

Cómo reproducir audio en segundo plano

Ahora vamos a configurar la compatibilidad para audio en segundo plano para que los usuarios puedan escuchar música con tu aplicación mientras interactúan con otra aplicación.

Cuando una aplicación que está reproduciendo vídeo se lleva a un segundo plano, como cuando el usuario cambia a una aplicación diferente, el comportamiento predeterminado es que el audio se detenga. Sin embargo, una aplicación de música puede elegir que el audio continúe reproduciéndose.

Para reproducir audio en segundo plano, debes establecer la tarea de audio en segundo plano en la sección Declaraciones del manifiesto de la aplicación. Y tienes que habilitar las propiedades isPlayEnabled y isPauseEnabled en SystemMediaTransportControls y controlar el evento buttonpressed. Esto es necesario para que el usuario tenga una manera de reproducir y detener el audio cuando la aplicación no es la aplicación activa.

Búscalo en la muestra: busca el elemento video en \pages\mediaPlayer\mediaPlayer.html, la función setupSystemMediaTransportControls en \pages\mediaPlayer\mediaPlayer.html y la sección Declaraciones de package.appmanifest.xml para habilitar la tarea en segundo plano.

Cómo crear controles de transporte

Si necesitas expandir las funciones que ofrecen los controles de transporte audio y video, o si quieres cambiarlos totalmente, tendrás que crear controles de transporte personalizados. La muestra de Reproducción de multimedia, de principio a fin implementa todos los controles de transporte personalizados en AppBar pero deja habilitados los controles de transporte integrados. Si vas a crear tus propios controles de transporte personalizados, quizás prefieras simplemente cambiar la interfaz de usuario integrada por la tuya.

Para desactivar los controles de transporte integrados, establece controls en false.

En este tema de procedimientos se describe cómo crear controles de transporte personalizados para reproducir, pausar, detener, avanzar, retroceder, control deslizante de posición, ventana completa, sección de audio, silenciar y volumen.

Búscalo en la muestra: busca los elementos AppBar en \pages\mediaPlayer\mediaPlayer.html y busca \pages\mediaPlayer\mediaPlayer.js para los controladores de eventos que implementan las características.

Agregar barras de la aplicación

Coloca la UI que interactúa con la aplicación y los objetos audio y video en las barras de la aplicación mediante un WinJS.UI.AppBar. Los controles WinJS.UI.AppBarCommand se han creado específicamente para la AppBar y funcionan perfectamente. Están disponibles los tipos de controles siguientes: "botón", "alternar", "control flotante", "separador" y "contenido".

La enumeración WinJS.UI.AppBarIcon contiene un gran número de símbolos que puedes usar para el AppBarCommand.icon. También puedes aportar tu propio archivo de Gráfico de red portátil (PNG).

Este es el aspecto de la AppBar inferior en la muestra complementaria.

La muestra complementaria emplea controles flotantes para el control de la selección de las pistas de audio y el control del volumen. Esto ayuda a ahorrar espacio.

Para obtener información sobre cómo usar la AppBar y cómo diseñar tu aplicación, consulta Directrices para las barras de la aplicación.

Búscalo en la muestra: busca los elementos <div id="appBarTop" y <div id="appBarBottom" en \pages\mediaPlayer\mediaPlayer.html. Si quieres saber cómo se implementa un control o característica determinados, consulta los controladores de eventos de los botones de barra de la aplicación en \pages\mediaPlayer\mediaPlayer.js.

Directrices para la configuración de una aplicación

Usa el control WinJS.UI.SettingsFlyout para crear aplicaciones de la Tienda Windows con JavaScript.

La configuración es para las opciones que afectan al comportamiento de la aplicación en su conjunto y que solo se ajustan ocasionalmente. La muestra Reproducción de multimedia, de principio a fin crea los controles flotantes Configuración de audio y Configuración de vídeo que se pueden usar para almacenar las opciones de configuración de la aplicación.

Búscalo en la muestra: busca app.onactivated en \js\default.js. Las páginas de configuración audio.html, video.html, help.html y privacy.html se encuentran en la subcarpeta \settings.

Uso del Kit para la certificación de aplicaciones en Windows

Se recomienda. Ejecutar el Kit para la certificación de aplicaciones en Windows te ayuda a asegurarte de que tu aplicación cumple los requisitos de la Tienda Windows. Te recomendamos que lo ejecutes cada vez que agregues funciones importantes a la aplicación.