Tag HTML <embed>

Neste artigo, falaremos sobre a incorporação de tags HTML . Desejando que satisfizesse os requisitos para a aprendizagem.

A tag HTML <embed> é usada para incorporar conteúdo externo ou mídia, como imagens, áudio, vídeo ou outro conteúdo interativo, diretamente em uma página da web.

Veja como você pode usar uma imagem incorporada:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<embed type="image/jpg" src="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" width="350" height="275">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está uma página HTML incorporada:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<embed type="text/html" src="https://mrexamples.com/html/tags/tag-embed" width="550" height="250">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um vídeo incorporado:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<embed type="video/webm" src="https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4" width="500" height="280">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de vídeo incorporado com controles:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<embed src='https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4"' width="400" height="300" type="video/mp4" autoplay="true" loop="true" controls="true">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Vantagens da tag HTML <embed>

A tag HTML <embed> oferece várias vantagens, incluindo:

  • A tag <embed> pode ser usada para incorporar uma ampla variedade de conteúdo externo ou mídia diretamente em uma página da Web, incluindo imagens, áudio, vídeo e conteúdo interativo, como miniaplicativos Flash ou Java.
  • Ao incorporar conteúdo externo diretamente em uma página da Web, você pode aumentar o envolvimento e a interatividade do usuário. Por exemplo, incorporar um vídeo ou widget interativo pode tornar seu conteúdo mais atraente e dinâmico.
  • A tag <embed> fornece maior controle sobre como o conteúdo externo é exibido em uma página da web. Você pode especificar o tamanho, a posição e o comportamento do conteúdo incorporado usando vários atributos, como largura, altura e reprodução automática.
  • A incorporação de conteúdo diretamente em uma página da Web também pode melhorar a acessibilidade para usuários que podem ter dificuldade em acessar conteúdo externo por outros meios, como navegar para um site separado ou baixar um arquivo.
  • A incorporação de conteúdo diretamente em uma página da Web também pode melhorar os tempos de carregamento da página, eliminando a necessidade de solicitações HTTP adicionais e reduzindo o tamanho geral da página.

Uso de incorporação de tags

Tag embed <embed> especifica um contêiner para recursos fora do site, por exemplo, uma página da web, uma foto, um reprodutor de mídia ou um plug-in.

Cuidado

Quase todos os navegadores têm applets e plug-ins Java obsoletos.

Os navegadores não são mais compatíveis com os controles ActiveX.

A funcionalidade Shockwave Flash também foi desativada nos navegadores mais recentes.

Recomendação

Se você quiser adicionar uma foto, use a tag <img> .

Se você quiser mostrar HTML, use a tag <iframe> .

Usando as tags <video> e <audio> quando quiser incorporar vídeo ou áudio.


Atributos

Atributo Valor Visão geral
altura píxeis Determine a altura do conteúdo incorporado.
origem URL Forneça o endereço do arquivo externo para incorporar
tipo tipo de mídia Indica o tipo de mídia do conteúdo incorporado.
largura píxeis Fornece a largura do conteúdo incorporado.

Compatibilidade do navegador

Elemento
<incorporar> Sim Sim Sim Sim Sim

Atributos

Global

As tags incorporadas <embed> também funcionam com os atributos globais do HTML .

Evento

A tag embed <embed> lida com os atributos do evento HTML .


Configurações padrão de CSS

O elemento <embed> geralmente será apresentado com os seguintes valores padrão:

embed:focus {
outline: none;
}
Assine nosso boletim informativo abaixo para estar em contato com o conhecimento técnico mais recente neste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone