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

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este tema se muestra cómo usar el elemento Video HTML5 para reproducir un vídeo en una aplicación de Windows en tiempo de ejecución con JavaScript.

Si deseas obtener otra muestra que use audio y vídeo en una aplicación de Windows en tiempo de ejecución con JavaScript, consulta la muestra de reproducción de multimedia HTML.

Para obtener información sobre formatos multimedia de audio y vídeo compatibles en las aplicaciones de Windows en tiempo de ejecución, consulta Formatos de audio y vídeo compatibles.

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Si necesitas ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.

Instrucciones

1. Declarar la funcionalidad del cliente Internet

Abre el archivo de manifiesto de la aplicación, package.appxmanifest.xml, y habilita Internet (Client) capability.

En Microsoft Visual Studio, abre el diseñador para el manifiesto de la aplicación haciendo doble clic en el elemento package.appxmanifest en el Explorador de soluciones.
Haz clic en Capacidades.
Activa la casilla de la capacidad Internet (Client) .

Esta capacidad proporciona acceso de salida a Internet, que se necesita para reproducir vídeo desde una dirección URL de Internet.

Nota Esta capacidad no es necesaria para la reproducción de archivos de vídeo locales.

2. Agregar el elemento de vídeo

Abre el archivo HTML denominado Default.html y agrega el elemento de vídeo al cuerpo del documento.

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

En el ejemplo, deberías sustituir la dirección URL "https://www.contoso.com/clip.mp4" por una dirección URL real.

El elemento Video proporciona un conjunto de controles de reproducción integrados que permiten al usuario iniciar o detener el vídeo, buscar una nueva posición y ajustar el volumen. Los controles de reproducción no están visibles de manera predeterminada. Para habilitarlos, agrega el atributo controls, como se indica. Los controles aparecen cuando el usuario mantiene el mouse sobre el vídeo.

3. Establecer los atributos Width y Height

Si conoces las dimensiones del vídeo por adelantado, es una buena idea establecer los atributos width y height en el elemento video. Estos atributos proporcionan el tamaño de diseño del elemento, en píxeles de hojas de estilo CSS. Durante la carga de la página, se reserva espacio para el elemento. Si dejas fuera los atributos width y height, la página se redistribuirá después de la descarga del vídeo.

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

Los atributos width y height siempre especifican píxeles CSS y no llevan una unidad. Por ejemplo, "5 cm" y "100%" no son válidos.

Si los atributos width y height no coinciden con el tamaño intrínseco del vídeo, el control amplía el vídeo, a la vez que conserva la relación de aspecto mediante el uso de formatos letterbox, si es necesario. Sin embargo, es mejor evitar la ampliación del vídeo, ya que esto puede crear artefactos visuales. Cuando sea posible, codifica el vídeo en el tamaño de visualización deseado.