Vamos aprender a reproduzir um áudio.
De uma forma simples, basta colocar o arquivo do áudio dentro de alguma pasta do projeto e usar a tag < audio>, colocar o caminho do áudio e depois usar o parametro CONTROLS, dessa forma, aparece um display do áudio na tela. E se você ainda quiser que o áudio comece a ser reproduzido automaticamente, basta colocar outro paramerto chamado autoplay.
Há outra maneira de reproduzir áudios, principalmente se você quiser que isso aconteça sem causar nenhum problema com diferentes navegadores. Basta usar a tag < audio> novamente, e dentro usar a tag < source> colocando o caminho do arquivo, e usando < type="audio/tipodearquivo">, colocando tipos de arquivos diferentes que você conhece, como mp3, mpeg, wav... dessa forma, o navegador tenta reproduzir um tipo, não dando certo, ele continua tentando com outros tipos. Exemplo:
< audio>
< source src="Midia/guanacast.mp3" type="audio/mpeg">
< source src="Midia/guanacast.mp3" type="wav">
< /audio>
Além disso, também é uma opção disponilizar o arquivo para download caso o usuário não consiga reproduzir.
Se o seu navegador não reproduziu o áudio, você pode baixar o arquivo:
Aqui estamos aprendendo como colocar um vídeo no site com hospedagem local.
Primeiro pegamos um vídeo produzido por nós mesmos, ou até vídeos gratuitos com autorização para uso, em sites como o Pexels e baixamos um programa chamado HandBrake para converter o vídeo em um tamanho menor, escolhendo uma das opções Web na hora de converter.
Da mesma forma que colocamos o áudio, também podemos seguir a lógica e inserir o vídeo usando a tag < video>
O recomendado, assim como para áudios, é usar a tag source para que o navegador tenha mais opções de formato de vídeo para rodar, caso algum tipo não seja reproduzido por ele. Mas aqui, no meu caso, irei usar apenas um arquivo que eu sei que funciona para navegadores Chrome.
Quando você quer compartilhar um vídeo do YouTuBe e clica na opção compartilhar, pode perceber que a primeira opção que aparece é a Incorporar. Isso quer dizer que se você quiser adicionar esse vídeo ao seu código HTML, você pode simplesmente copiar o código e apenas colá-lo no HTML.
Tente abrir esse site em varios dispositivos ou simplesmente aumente e diminua o tamanho do navegador para fazer um teste.
Temos 3 imagens no código, uma imagem pequena de 300px, uma imagem média de 700px e uma imagem grande de 1000px. Aqui estamos configurando o HTML para saber quando trocar de uma imagem para outra de acordo com o tamanho do navegador. Se o navegador estiver em tela cheia, a imagem será a grande, se tiver em torno de 50% da tela, a imagem que aparecerá será a imagem média, e menor do que isto, será a imagem pequena.
Isso serve para termos imagens adaptadas ao tamanho do navegador. Se estou criando um site de notícias, por exemplo, onde eu coloque fotos, ter tamanhos diferentes de imagens é uma ideia boa para não deixar o site desequilibrado visualmente para o usuário.
As tags que usamos são < picture>, < source> com SRCSET para linkar a imagem e TYPE. Veja:
< picture>
< source media="(max-width: 750px)" srcset="Imagens/P.png" type="image/png">
< source media="(max-width: 1050px)" srcset="Imagens/M.png" type="image/png">
< img src="Imagens/G.png" alt="imagem flexivel">
< /picture>
Preste muito atenção na ordem em que está sendo colocada as imagens, o recomendado é começar pela imagem pequena, seguida da média e então a grande usando img normalmente.