Principal Smartphones Agregar video a su sitio web con HTML5

Agregar video a su sitio web con HTML5

  • Adding Video Your Website With Html5

En el primero de sus blogs para PC Pro , desarrollador web Ian Devlin revela cómo insertar videos en su sitio web con HTML5



Agregar video a su sitio web con HTML5Agregar video a su sitio web con HTML5

NOVEDADSonyHDRBack_Web-462x369NOVEDADSonyHDRBack_Web-462x369



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 OGGH.264 (mp4)
Firefox 3.5+x
Chrome 3+
Safari 3+x
Opera 10.5+x
Internet Explorer 8xx
Internet Explorer 9x
iPhonex
Androidx

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:

AtributoDescripción
srcuna URL válida para el archivo de video en sí
auto-reproducciónun booleano que indica si el video debe reproducirse automáticamente
control Sun booleano que indica que el navegador debe mostrar los controles multimedia predeterminados
círculoun booleano que indica si el video debe reproducirse repetidamente
precargaindica al navegador si se requiere la descarga preventiva del video en sí, o si solo se necesitan metadatos.
Los valores posibles son:

  • ninguno: indica que el video no se debe precargar (ya que probablemente no sea necesario)
  • metadatos: es probable que el video no sea obligatorio, pero sus metadatos (p. ej., dimensiones, duración) son deseables
  • automático: informa al navegador que intente descargar el video completo
  • (cadena vacía) - significa lo mismo que auto
pósterla URL de un archivo de imagen que se mostrará cuando no haya datos de video disponibles
anchoel ancho del video, en píxeles CSS
alturala 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:

AtributoDescripción
srcuna URL válida al archivo multimedia (en este caso, video)
tipoel tipo de archivo multimedia que debe ser un Tipo de Mimica , p.ej. indica que es un video de Theora OGG, y también puede proporcionar el códec MIME para ayudar al navegador a decidir cómo reproducir el video usando type='video/ogg'.
mediaproporciona 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.

Artículos De Interés

La Elección Del Editor

Cómo cancelar Audible
Cómo cancelar Audible
Gracias a Audible y plataformas similares, ya no tienes que dedicar tiempo especial a leer un libro. Con audiolibros a su disposición, puede escuchar cualquier libro, en cualquier momento y en cualquier lugar. Esto es especialmente útil mientras viaja o cuando
Archivos de etiquetas: modo quiosco de Windows 10
Archivos de etiquetas: modo quiosco de Windows 10
Copie todos los enlaces o los seleccionados en una página a la vez en Firefox
Copie todos los enlaces o los seleccionados en una página a la vez en Firefox
Es posible copiar varios enlaces en Firefox con un complemento. En este artículo veremos cómo se puede hacer.
Crear acceso directo a variables de entorno en Windows 10
Crear acceso directo a variables de entorno en Windows 10
Me gustaría compartir cómo ver o editar variables de entorno en Windows 10 directamente, desde la línea de comando o un acceso directo.
Samsung Galaxy S3 review
Samsung Galaxy S3 review
ACTUALIZACIÓN: Nuestra revisión de Samsung Galaxy S III se ha actualizado con una sección sobre la actualización de Android 4.1.2. Desplácese hasta el final de la revisión para leer más. El lugar de Samsung en la mesa principal de la industria de los teléfonos inteligentes
Actualizaciones acumulativas para Windows 10, 16 de septiembre de 2020
Actualizaciones acumulativas para Windows 10, 16 de septiembre de 2020
Microsoft ha lanzado un conjunto de lo que la compañía llama actualizaciones 'C' para Windows 10 y las etiqueta como 'Vista previa'. Los parches están disponibles para varias versiones de Windows compatibles. Esto es lo nuevo y lo que ha cambiado. Las actualizaciones que tienen una etiqueta 'Vista previa' generalmente se enumeran en actualizaciones opcionales. Windows 10, versión 1909 y
Cómo comprobar si sus controladores están actualizados
Cómo comprobar si sus controladores están actualizados
https://www.youtube.com/watch?v=llHMg1OgC5g Probablemente ya sepa lo importantes que son las actualizaciones de software. Al igual que la actualización de aplicaciones y el sistema operativo en un teléfono inteligente, la actualización de controladores en una computadora es importante para garantizar que cada uno de sus