HTML - Incorporar multimídia
Às vezes, você precisa adicionar música ou vídeo em sua página da web. A maneira mais fácil de adicionar vídeo ou som ao seu site é incluir a tag HTML especial chamada<embed>. Esta tag faz com que o próprio navegador inclua controles para a multimídia fornecida automaticamente pelo navegador que suporta a tag <embed> e o tipo de mídia fornecido.
Você também pode incluir um <noembed>tag para os navegadores que não reconhecem a tag <embed>. Você pode, por exemplo, usar <embed> para exibir um filme de sua escolha, e<noembed> para exibir uma única imagem JPG se o navegador não suportar a tag <embed>.
Exemplo
Aqui está um exemplo simples para reproduzir um arquivo midi incorporado -
<!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>Os atributos da tag <embed>
A seguir está a lista de atributos importantes que podem ser usados com a tag <embed>.
Note−Os atributos align e autostart tornaram-se obsoletos no HTML5. Não use esses atributos.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 |
align Determina como alinhar o objeto. Pode ser definido para centro, esquerda ou direita . |
| 2 |
autostart Este atributo booleano indica se a mídia deve iniciar automaticamente. Você pode defini-lo como verdadeiro ou falso. |
| 3 |
loop Especifica se o som deve ser reproduzido continuamente (definir o loop para verdadeiro), um certo número de vezes (um valor positivo) ou não (falso) |
| 4 |
playcount Especifica o número de vezes para reproduzir o som. Esta é uma opção alternativa para o loop se você estiver usando o IE. |
| 5 |
hidden Especifica se o objeto multimídia deve ser mostrado na página. Um valor falso significa não e valores verdadeiros significam sim. |
| 6 |
width Largura do objeto em pixels |
| 7 |
height Altura do objeto em pixels |
| 8 |
name Um nome usado para fazer referência ao objeto. |
| 9 |
src URL do objeto a ser incorporado. |
| 10 |
volume Controla o volume do som. Pode ser de 0 (desligado) a 100 (volume total). |
Tipos de vídeo suportados
Você pode usar vários tipos de mídia como filmes Flash (.swf), AVI's (.avi) e tipos de arquivo MOVs (.mov) dentro da tag embed.
.swf files - são os tipos de arquivo criados pelo programa Flash da Macromedia.
.wmv files - são os tipos de arquivo de vídeo de mídia do Windows da Microsoft.
.mov files - são o formato Quick Time Movie da Apple.
.mpeg files - são arquivos de filme criados pelo 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>Isso produzirá o seguinte resultado -
Áudio de fundo
Você pode usar HTML <bgsound>tag para reproduzir uma trilha sonora no plano de fundo de sua página da web. Esta tag é compatível apenas com o Internet Explorer e a maioria dos outros navegadores a ignora. Ele baixa e reproduz um arquivo de áudio quando o documento host é baixado pela primeira vez pelo usuário e exibido. O arquivo de som de fundo também será reproduzido sempre que o usuário atualizar o navegador.
Note- A tag bgsound está obsoleta e deve ser removida em uma versão futura do HTML. Portanto, eles não devem ser usados, é sugerido o uso de tag de áudio HTML5 para adicionar som. Mas ainda para fins de aprendizado, este capítulo irá explicar a tag bgsound em detalhes.
Esta tag tem apenas dois atributos loop e src . Ambos os atributos têm o mesmo significado explicado acima.
Aqui está um exemplo simples para reproduzir um pequeno arquivo midi -
<!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>Isso produzirá a tela em branco. Esta tag não exibe nenhum componente e permanece oculta.
O Internet Explorer também pode lidar com apenas três arquivos de formato de som diferentes - wav, o formato nativo para PCs; au, o formato nativo para a maioria das estações de trabalho Unix; e MIDI, um esquema universal de codificação de música.
Tag de objeto HTML
HTML 4 apresenta o <object>elemento, que oferece uma solução multifuncional para inclusão de objeto genérico. o<object> O elemento permite que os autores de HTML especifiquem tudo o que é exigido por um objeto para sua apresentação por um agente do usuário.
Aqui estão alguns exemplos -
Exemplo 1
Você pode incorporar um documento HTML em um documento HTML da seguinte maneira -
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Aqui, o atributo alt entrará em cena se o navegador não suportar tag de objeto .
Exemplo - 2
Você pode incorporar um documento PDF em um documento HTML da seguinte maneira -
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Exemplo - 3
Você pode especificar alguns parâmetros relacionados ao documento com o <param>tag. Aqui está um exemplo para incorporar um arquivo 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>Exemplo - 4
Você pode adicionar um documento Flash da seguinte forma -
<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>Exemplo - 5
Você pode adicionar um miniaplicativo Java ao documento HTML da seguinte maneira -
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>o classidatributo identifica qual versão do Java Plug-in usar. Você pode usar o atributo codebase opcional para especificar se e como fazer o download do JRE.