HTML - Insertar multimedia
A veces es necesario agregar música o videos a su página web. La forma más fácil de agregar video o sonido a su sitio web es incluir la etiqueta HTML especial llamada<embed>. Esta etiqueta hace que el navegador incluya controles para el multimedia proporcionado automáticamente. El navegador admite la etiqueta <embed> y el tipo de medio dado.
También puede incluir un <noembed>etiqueta para los navegadores que no reconocen la etiqueta <embed>. Podría, por ejemplo, usar <embed> para mostrar una película de su elección y<noembed> para mostrar una sola imagen JPG si el navegador no admite la etiqueta <embed>.
Ejemplo
Aquí hay un ejemplo simple para reproducir un archivo midi incrustado:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Los atributos de etiqueta <embed>
A continuación se muestra la lista de atributos importantes que se pueden usar con la etiqueta <embed>.
Note−Los atributos de alineación y inicio automático están en desuso en HTML5. No utilice estos atributos.
| No Señor | Atributo y descripción |
|---|---|
| 1 | align Determina cómo alinear el objeto. Se puede configurar en el centro, la izquierda o la derecha . |
| 2 | autostart Este atributo booleano indica si los medios deben iniciarse automáticamente. Puede establecerlo como verdadero o falso. |
| 3 | loop Especifica si el sonido debe reproducirse continuamente (establecer el bucle en verdadero), un cierto número de veces (un valor positivo) o no reproducirse en absoluto (falso) |
| 4 | playcount Especifica el número de veces que se reproducirá el sonido. Esta es una opción alternativa para el ciclo si está usando IE. |
| 5 | hidden Especifica si el objeto multimedia debe mostrarse en la página. Un valor falso significa no y los valores verdaderos significan sí. |
| 6 | width Ancho del objeto en píxeles |
| 7 | height Altura del objeto en píxeles |
| 8 | name Un nombre utilizado para hacer referencia al objeto. |
| 9 | src URL del objeto a incrustar. |
| 10 | volume Controla el volumen del sonido. Puede ser de 0 (apagado) a 100 (volumen completo). |
Tipos de video compatibles
Puede utilizar varios tipos de medios como películas Flash (.swf), tipos de archivos AVI (.avi) y MOV (.mov) dentro de la etiqueta de inserción.
.swf files - son los tipos de archivos creados por el programa Flash de Macromedia.
.wmv files - son los tipos de archivos de Windows Media Video de Microsoft.
.mov files - son el formato Quick Time Movie de Apple.
.mpeg files - son archivos de película creados por Moving Pictures Expert Group.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Esto producirá el siguiente resultado:
Audio de fondo
Puedes usar HTML <bgsound>etiqueta para reproducir una banda sonora en el fondo de su página web. Esta etiqueta solo es compatible con Internet Explorer y la mayoría de los demás navegadores ignoran esta etiqueta. Descarga y reproduce un archivo de audio cuando el usuario descarga y muestra por primera vez el documento anfitrión. El archivo de sonido de fondo también se reproducirá cada vez que el usuario actualice el navegador.
Note- La etiqueta bgsound está obsoleta y se supone que se eliminará en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar audio de etiqueta HTML5 para agregar sonido. Pero aún con el propósito de aprender, este capítulo explicará la etiqueta bgsound en detalle.
Esta etiqueta solo tiene dos atributos loop y src . Ambos atributos tienen el mismo significado que se explicó anteriormente.
Aquí hay un ejemplo simple para reproducir un archivo midi pequeño:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Esto producirá la pantalla en blanco. Esta etiqueta no muestra ningún componente y permanece oculta.
Internet Explorer también puede manejar solo tres archivos de formato de sonido diferentes: wav, el formato nativo para PC; au, el formato nativo para la mayoría de las estaciones de trabajo Unix; y MIDI, un esquema universal de codificación de música.
Etiqueta de objeto HTML
HTML 4 presenta el <object>elemento, que ofrece una solución universal para la inclusión de objetos genéricos. los<object> El elemento permite a los autores HTML especificar todo lo que requiere un objeto para su presentación por un agente de usuario.
A continuación se muestran algunos ejemplos:
Ejemplo 1
Puede incrustar un documento HTML en un documento HTML de la siguiente manera:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Aquí el atributo alt aparecerá en la imagen si el navegador no admite la etiqueta de objeto .
Ejemplo - 2
Puede incrustar un documento PDF en un documento HTML de la siguiente manera:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Ejemplo - 3
Puede especificar algunos parámetros relacionados con el documento con el <param>etiqueta. Aquí hay un ejemplo para incrustar un archivo wav:
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Ejemplo - 4
Puede agregar un documento flash de la siguiente manera:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Ejemplo - 5
Puede agregar un subprograma de Java en un documento HTML de la siguiente manera:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>los classidEl atributo identifica qué versión de Java Plug-in utilizar. Puede utilizar el atributo de base de código opcional para especificar si y cómo descargar el JRE.