A adição de mídias em páginas web é algo comum atualmente. Toda a página possui imagens, e para facilitar a adição deste tipo de conteúdo o HTML traz tags para carregar imagens e vídeos.

Não é necessário implementar rendenização de imagens ou vídeo, todo o navegador já vem com estes recursos disponíveis.

Imagens

A tag img define uma imagem. Ela possui dois atributos essenciais:

• src: fonte da imagem.
• alt: descrição da imagem para fins de acessibilidade.

<img 
	src="../fofura.jpg" 
	alt="Exemplo de dinossauro fofo sorrindo e pedindo um abraço" 
	title="Dinossauro" 
/>

Para mais funcionalidades da tag acesse: https://www.w3schools.com/tags/tag_img.asp.

Vídeo

Esta tag possui algumas definições a mais e seu comportamento poderá variar mais dependendo do navegador utilizado.

Cada tag de video possui nodos filhos do tipo source com uma ou mais fontes diferentes para o mesmo vídeo. Isto se da pois nem todo o navegador possui suporte para todos os tipos diferentes de codificação de vídeo.

Caso o navegador não suporte nenhuma das fontes criadas o texto ao final da tag video será exibido.

O código abaixo irá criar um player de vídeo com 400 pixels de largura, width="400", irá reproduzir o vídeo automaticamente ao carregar a página, autoplay, sem som, muted, e com controles de reprodução, controls.

Abaixo também é passada apenas uma fonte para o vídeo, no formato mp4.

<video width="400" autoplay muted controls>
	<source src="../dino_dancante.mp4" type="video/mp4">
	Your browser does not support HTML video.
</video>

Para mais funcionalidades da tag acesse: https://www.w3schools.com/tags/tag_video.asp.