En el primero de sus blogs para PC Pro , desarrollador web Ian Devlin revela cómo insertar videos en su sitio web con HTML5
cómo agregar juegos a la discordia
Probablemente la característica más importante y de la que más se habla de HTML5 es el video incrustado. Actualmente, el único método para agregar contenido de video a su sitio web es con un complemento de terceros como Flash, QuickTime o RealPlayer. Con el nacimiento de HTML5 y el elemento de video, todo esto cambiará, con el soporte de video siendo manejado por el navegador web, eliminando la necesidad de soporte de terceros.
Varios navegadores web ya ofrecen soporte para HTML5. Aquí vamos a revelar cómo puede insertar videos sin complementos en su sitio y los problemas que enfrentará.
Tipos de archivos y compatibilidad del navegador
Para empezar, veremos brevemente los diferentes tipos de archivos de video que son compatibles con HTML5. Estos son Theora OGG y H.264 (.mp4). Los diferentes navegadores admiten diferentes tipos y algunos no admiten ninguno. La siguiente tabla indica esto:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Códecs y otros problemas técnicos
HTML5 en sí no especifica un códec de video para usar, y esto ha llevado a discusiones sobre cuál es lo mejor para usar en la web . Entonces, para cubrir todos los navegadores, tenemos que admitir ambos códecs.
Y luego, por supuesto, está Internet Explorer. Por el momento, ninguna de las versiones publicadas de Internet Explorer admite el elemento de video y aún se requiere un complemento para reproducir el video. Esto cambiará con el lanzamiento de Internet Explorer 9 (probablemente a principios del próximo año), cuando se admitirá H.264, junto con muchas otras ventajas de HTML5.
En caso de que se esté preguntando cómo, puede convertir sus archivos de video a OGG (puede leer más sobre el tipo de Theora OGG en el TheoraCookbook ) archivos usando el Miro Video Converter .
Para obtener más información detallada sobre el elemento de video y los códecs, diríjase al sumergirse en html5: video en la web por Mark Pilgrim.
Código HTML5
Ahora pasamos al código HTML5 real y cómo podemos hacer que funcione. HTML5 nos proporciona dos nuevos elementos que podemos usar para agregar video a nuestras páginas web: el elemento, que ya hemos mencionado, y el elemento. Veamos cada uno de estos por turno.
El elemento
El elemento de video puede tener los siguientes atributos:
| Atributo | Descripción |
|---|---|
| src | una URL válida para el archivo de video en sí |
| auto-reproducción | un booleano que indica si el video debe reproducirse automáticamente |
| control S | un booleano que indica que el navegador debe mostrar los controles multimedia predeterminados |
| círculo | un booleano que indica si el video debe reproducirse repetidamente |
| precarga | indica al navegador si se requiere la descarga preventiva del video en sí, o si solo se necesitan metadatos. Los valores posibles son:
|
| póster | la URL de un archivo de imagen que se mostrará cuando no haya datos de video disponibles |
| ancho | el ancho del video, en píxeles CSS |
| altura | la altura del video, en píxeles CSS |
A partir de esto, se puede ver lo fácil que es incrustar un video OGG en su sitio web utilizando solo el elemento de video:
|_+_|
Eso es realmente todo lo que hay que hacer.
Cualquier navegador que admita el formato Theora OGG ahora debería mostrar y reproducir correctamente su video sin más preámbulos. Por supuesto que no es tan fácil, porque como hemos visto en la tabla anterior, el código solo funcionaría en Firefox, Chrome y Opera. Por lo tanto, también debemos tener una alternativa a H.264. Esto se puede lograr usando el elemento, que nos permite definir múltiples fuentes de medios para el elemento de video.
detener la gestión de memoria de código de Windows 10 arreglar
El elemento
El elemento fuente tiene los siguientes atributos:
| Atributo | Descripción |
|---|---|
| src | una URL válida al archivo multimedia (en este caso, video) |
| tipo | el tipo de archivo multimedia que debe ser un Tipo de Mimica , p.ej. type='video/ogg'. |
| media | proporciona el tipo de medio deseado del recurso de medios y debe ser un media query , p.ej. type='video/ogg; codecs='theora, vorbis' indica que el video es adecuado para dispositivos portátiles o media='handheld' lo que indica que el video es apropiado para pantallas de 720 píxeles o más. |
Nota: que el elemento de origen es nulo y tiene una etiqueta de inicio pero no una etiqueta de cierre
Lo más útil del elemento fuente es que podemos usarlo para apilar los diferentes tipos de archivos, lo que permite que el navegador pruebe cada uno de ellos hasta que encuentre uno que pueda reproducir.
Usando y juntos
Para apilar videos en los diferentes tipos dentro del elemento de video, ingresamos el código de la siguiente manera:
|_+_|
El código anterior ahora funcionará en todos los navegadores excepto Internet Explorer, que mostrará el mensaje indicado anteriormente.
Puede probar esto usted mismo viendo la página de video de prueba HTML5, que contiene un video de muestra de una mariposa en formato Theora OGG y MP4, por lo que si está viendo esto en Firefox, Chrome, Safari, Opera o en el iPhone o en un Teléfono Android, debería poder verlo.
Los afilados cuchillos entre ustedes ahora notarán que podemos aprovechar este apilamiento y tener un respaldo a Flash (o algún otro complemento) en la parte inferior en lugar de mostrar un mensaje de disculpa, no puede ver este video, usando el siguiente código :
|_+_|
Conclusión
Como ocurre con la mayoría de los elementos HTML5, la compatibilidad del navegador con los elementos fuente y de vídeo es actualmente irregular. También existe un gran debate en este momento sobre si el elemento fuente eliminará el uso de Flash como el método más popular para agregar contenido de video a sitios web. No estoy seguro de que elimine Flash por completo, pero, sin embargo, creo que es justo decir que está aquí para quedarse y proporcionará a los desarrolladores web un enfoque más limpio y fácil de incrustar videos.
