Arquivo: multimidia.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tudo sobre o Google Glass</title>
    <link rel="stylesheet" href="_css/estilo.css">
    <link rel="stylesheet" href="_css/media.css">
</head>
<script src="_javascript/funcoes.js"></script>
<body>
    <div id="interface">
        
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
            </hgroup>
    
            <img id="icone" src="/curso-html5-pacote01/projeto-glass-html5/_imagens/multimidia.png" 
            alt="oculos preto do google glass">
            <nav id="menu">
                <h1>Menu Principal</h1>
                <ul type="disc">   
                    <li onmouseover="mudaFoto('_imagens/home.png')" 
                    onmouseout="mudaFoto('_imagens/multimidia.png')">
                        <a href="index.html">Home</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/especificacoes.png')" 
                    onmouseout="mudaFoto('_imagens/multimidia.png')">
                        <a href="specs.html">Especificações</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/fotos.png')" 
                    onmouseout="mudaFoto('_imagens/multimidia.png')">
                        <a href="fotos.html">Fotos</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/multimidia.png')" 
                    onmouseout="mudaFoto('_imagens/multimidia.png')">
                        <a href="multimidia.html">Multimídia</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/contato.png')" 
                    onmouseout="mudaFoto('_imagens/multimidia.png')">
                        <a href="fale-conosco.html">Fale conosco</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="corpo-full">
            <article id="noticia-principal">
                <header id="cabecalho-artigo">
                    <hgroup>
                        <h3>Glass > Multimídia</h3>
                        <h1>Sons e Vídeos</h1>
                        <h2>por Gustavo Guanabara</h2>
                        <h3 class="direita">Atualizado em 01/Maio/2013</h3>
                    </hgroup>
                </header>

                <div id="tv-radio">
                    <audio id="musica" controls="controls">
                        <source src="_media/2009-lovers-carvings-bibio.mp3" type="audio/mpeg">
                        <source src="_media/2009-lovers-carvings-bibio.m4a" type="audio/x-aac">
                        desculpe, mas não foi possível carregar o áudio
                    </audio>
                    <video id="filme" controls="controls" poster="_imagens/video-mini03.jpg">
                        <source src="_media/getting-started.mp4" type="video/mp4">
                        <source src="_media/getting-started.webm" type="video/webm">
                        desculpe, mas não foi possível carregar o vídeo
                    </video>
                </div>

            </article>
        </section>

            <footer id="rodape">
                <p>Copyright &copy; 2013 - by Gustavo Guanabara <br> 
                <a href="<https://facebook.com/cursosemvideo>" target="_blank">Facebook</a> | 
                <a href="<https://twitter.com/cursosemvideo>" target="_blank">Twitter</a></p>
            </footer>
        </div>
    </body>
</html>

`<video>` : ela serve como uma tag semântica de agrupamento para as tags `source` que adicionam os arquivos de vídeo

`<video id="filme" controls="controls" poster="_imagens/video-mini03.jpg">` : a tag `controls` é usada para exibir os controles padrão do player de vídeo. Isso inclui botões como play/pause, volume, e a barra de progresso do vídeo.

E claro sei que gera uma duvida sobre o valor que foi adicionado para esse atributo. O professor Gustavo Guanabara adicionou o atributo da seguinte forma: controls=”controls”. Exponencialmente essa tag controls=”controls” tem o mesmo efeito que simplesmente a tag controls . Eu digo isso, atualmente, por que na época em que o professor Gustavo Guanabara gravou, esse atributo tinha que ser escrito dessa forma.

`<source>` : Adiciona os arquivos de áudio e vídeo

Arquivos adicionados:

<aside> <img src="https://cdn-icons-png.freepik.com/256/2991/2991640.png?ga=GA1.1.1881583471.1689725477&semt=ais_hybrid" alt="https://cdn-icons-png.freepik.com/256/2991/2991640.png?ga=GA1.1.1881583471.1689725477&semt=ais_hybrid" width="40px" /> 2009-lovers-carvings-bibio.mp3

</aside>

<aside> <img src="https://cdn-icons-png.freepik.com/256/3074/3074767.png?ga=GA1.1.1881583471.1689725477&semt=ais_hybrid" alt="https://cdn-icons-png.freepik.com/256/3074/3074767.png?ga=GA1.1.1881583471.1689725477&semt=ais_hybrid" width="40px" /> getting-started.mp4

</aside>

Arquivo: multimidia.html

<video> : ela serve como uma tag semântica de agrupamento para as tags source que adicionam os arquivos de vídeo

<video *id*="filme" *controls*="controls" *poster*="_imagens/video-mini03.jpg"> : a tag controls é usada para exibir os controles padrão do player de vídeo. Isso inclui botões como play/pause, volume, e a barra de progresso do vídeo.

<source> : Adiciona os arquivos de áudio e vídeo

Arquivos adicionados:

`<video>` : ela serve como uma tag semântica de agrupamento para as tags `source` que adicionam os arquivos de vídeo

`<video id="filme" controls="controls" poster="_imagens/video-mini03.jpg">` : a tag `controls` é usada para exibir os controles padrão do player de vídeo. Isso inclui botões como play/pause, volume, e a barra de progresso do vídeo.

`<source>` : Adiciona os arquivos de áudio e vídeo