Formatos de vídeo para seu site - @Curso em Vídeo HTML5 e CSS3

e essa é mais uma aula que diz respeito ao Capítulo 11 do seu material Então baixa lá abre o Capítulo 11 Km continuar a [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vinda a mais uma aula do seu curso de html com CSS totalmente atualizado e falando sobre um amigo é muito importante agora está no Capítulo 11 que fala sobre mídias nós falamos já sobre imagens dinâmicas General a imagens que carregam imagens diferentes de acordo com o tamanho da tela nós falamos sobre áudio também no último vídeo e agora nós vamos falar sobre um lado das mídias mais populares Ultimamente é a mídia mais popular em sites com certeza são as imagens que são leves e mais os vídeos que ganharam muito espaço existente conversar sobre eles têm muita gente confunde e acaba que vai arrumar problema para si mesmo e vai discutir em vários vídeos assistir aí com toda atenção possível porque a lente aprender a colocar milho no teu site a gente tem que aprender como colocar vídeos de maneira eficiente que não vão comprometer a velocidade do nosso site porque não comprometeu o nosso bolso pra gente não gastar mais dinheiro com hospedagem e tráfego Extra de arquivos né tráfego Extra de dados a gente vai conversar sobre isso em todo na sequência acompanha que vale muito a pena beleza combinado então vamos direto do computador que eu tenho umas coisas para te mostrar eu venho falando aqui no curso de HTML e CSS várias vezes sobretudo na alta Esse aqui é mais um recado na plataforma que você tá fazendo o nosso curso aqui de desenvolvimento de site e se interessou pela coisa de servidores se interessou pela parte física né você tem até os cursos básicos aqui no curso em vídeo mas para aprender isso tudo de verdade com termos mais técnicos mais aprofundados academicamente organizados aí é só lá no estudonalta mesmo inclusive o nosso curso de redes nossos módulos de redes são criados exclusivamente pelo Alfredo que é o nosso professor aqui do curso em Harvard e no curso de redes e mostram muito mais do que o nosso curso aqui bem básico bem Inicial mostrou a mesma coisa não curso de Linux ele foi totalmente criado pelo professor Ricardo ele mostra desde o básico até o mais avançado de um servidor Linux na verdade um servidor local né Da sua rede local mas já é um bom isso e para você conseguir aprender a criar servidores Linux mas também lançamos no estudo alta um curso de eletrônica básica com o professor Eduardo mas não é um curso para especialistas em eletrônica não foi um curso totalmente modelado e pensado para quem é a profissional de informática de ti mas tem que começar aprender a mexer com motores tem que entender um pouquinho mais sobre elétrica eletricidade e tudo tá sendo explicado de uma maneira muito simples e bem objetiva tudo isso já está disponibilizado no estudo em alta e você pode ser um assinante com uma assinante acessando esse link que está aparecendo aqui na tela Então é isso vamos seguir com o nosso curso mas considere também se tornar um aluno ou uma aluna do Studio Now antes de começar hoje estamos aqui a falar sobre vídeo eu tenho que primeiro baixar alguns vídeos já E mais uma vez eu venho te dizer a mesma coisa de sempre cara cuidado com direitos autorais vídeos com direitos autorais podem dar problemas para o seu site Transformice você tá quê e para uma empresa né para alguém que vai vender produtos e serviços e não pode usar vídeos com direitos autorais eu vou te recomendar acessar aquele site que a gente já falou na aula de imagens né do Capítulo 6 que é o Tec céus o pixels além de baixar lindas imagens sem né direitos autorais pagos nessa não vai ter problema com isso você pode também baixar vídeo olha que você tiver tem vídeo Olha o vídeo que você quiser eu vou para lá nesse limãozinho ficar na água beleza não querer usar esse vídeo aqui para baixar você pode ver que baixe grátis Aí eu clico aqui não precisa baixar com a resolução máxima nessa que é full HD né que é o 1080p eu vou baixar Eu Vou baixar esse grandão Eu vou mostrar pra vocês umas coisas lembrei que você não precisa baixar ele todo não mas o que você escolhe a qualidade então escolheu qualidade e clique em baixo e gratis aí ele vai baixar o arquivo já tá vendo baixando um arquivo de 11 MB Então já tá aqui na pasta de download está vendo pega os seus vídeos Total o arquivo tem 11 M há 11 mega é um bocadinho tá é um arquivo bem grandinho Vamos tentar fazer o seguinte vamos falar primeiro sobre compatibilidade no caso de navegadores né no caso do HTML 5 os padrões mais utilizados e mais suportados Inclusive tem no seu material em PDF ou até abrir aqui para não errar são os formatos MP4 né que é os arquivos. MP4. M4v e nós temos também o formato webm que é um arquivo bem pequenininho mas para qualidade e sem sofrível que também os arquivos o Gegê que no caso de vídeos são os arquivos pode ver então eu tenho entre a 4 m 4G né que são mesmo grupo MP4 nós temos webcam e o Tranquilo então nós também assim como nos áudios o ideal é que a gente tenha vários arquivos de vários formatos eu vou te dar uma dica porque já que vídeo alguma coisa tão Popular você vai usar no seu site é e assim depois a gente vai falar sobre vídeos hospedados como a gente vai ensinar aqui mas se você realmente o cliente precisa de um vídeo e não é tão grande que você precisa colocar o milho hospedados na própria no próprio sistema dele vou te dar uma dica valiosíssima me acompanha aqui ó existe um programa Nossa eu uso ele todos os dias computador que você tá vendo aqui no carro ele é ele é muito solicitado para esse é o programa Hands Break vai procurar por hendrick open source vídeo transcoder Cléo Pires torce né como próprio nome da escala acabou de falar em uma é um sócio 100% gratuito para baixar ele aqui ele vai fazer o download do arquivo e nós vamos instalar ele cara é uma outra ferramenta não tiver a dica do gripe lá para criar as vendagens eu vou te dar uma dica do handbrake para você converter os seus vídeos cara vídeos convertidos como adibreak ficam sensacionais você vai ver vamos ver aquela as opções clique em next instal basicamente vai instalar uma ferramenta basicona pênis eu não gosto de sofre a quinta vou apagar e para lixão não tô desinstalando só eu só tirei o ícone não consigo acostumar com nada na minha área de trabalho a questão de cada um com seu cada um eu vou fazer o seguinte aqui cara eu vou pegar esse arquivo MP4 voltar contra você nele vou lá no meu documentos e Estudos a HTML CSS exercícios eu vou criar aqui o exercício 12 como criar uma pasta aqui é x02 dentro da pasta XL 12 nós vamos criar uma pasta mídia sem acento tudo letras minúsculas nunca esquece disso dentro da pasta mídia eu vou dar controle vou colar ele aqui vou também renomear ele então bota Clica com o botão direito renomear e vou chamar ele de meu vídeo A meu traço vídeo tudo letras minúsculas sem espaço sem acento sem nada e aí eu vou abrir o handbrake o clicar no botão iniciar e clique em e digita e handbook a gente HN ele já me sugeriu o handbrake handbrake desse lado e a minha pasta desse lado ele tá dizendo ó joga um arquivo para lá ou você escolhe aqui qual a forma simplesmente vou fazer o seguinte ó tu vem para cá já peguei o vídeo tá vendo que estão aqui é um preview Zinho aqui tem um irmãozinho e ele tá dizendo o seguinte Olha só ele já reconheceu aqui O arquivo já decodificou ele e aqui eu posso escolher o formato Olha isso ele me dá opção do MP4 m4v e webm no meu caso aqui eu vou querer fazer o seguinte eu vou pegar esse meu vídeo e vou converter ele para ver se existe aqui para web e vou botar aqui ó ele tá no arquivo 1080p Não foi isso que eu baixei se eu não me engano vou converter ele para vinho e para YouTube 720p a 30 quadros por segundo Já coloquei aqui ele já me deu sugestão de formato e tudo mais muitos alunos sempre entrar em contato comigo dizendo assim a mais Guanabara às vezes sai um vídeo novo Augusto novo não consegui vídeo eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar ó t.

me eu consegui vídeo esse é o nosso link do canal mas não é o canal do YouTube é nosso canal no telegram Eu costumo sempre dizer o telegram tipo o WhatsApp só que muito bom é só você acessar excelente confirmar a inscrição no nosso canal isso é gratuito e você vai receber sempre notificações daquilo que a gente vai lançar essa é a maneira mais segura de se manter sempre atualizado o atualizada com as novidades do que os índios usam aqui eu vou mandar ele salvar salvar aonde ele vai salvar aqui na pasta vídeos lá dentro do meu usuário na pasta 20 Se você quiser mudar você pode clicar aqui em graus vou clicar aqui em Star teen code e ele que ele vai começar a fazer ele vai ler o meu arquivo Inicial atrás não tem uma barrinha aqui fazendo sujeito tão pequenininha já ele vai ler o meu arquivo original vai decodificar para um formato que seja especial para ser usado na web e ele vai gerar um arquivo bem na cara bem menor vamos fazer dois testes aqui essa primeiro que a gente tá fazendo aqui agora a gente já é um arquivo MP4 não formato perto da o YouTube o vinho sejam compatíveis ou seja arquivos bem leves com a qualidade razoável Nunca pense já falei isso no vídeo anterior terminou aqui deixa eu vou gerar uma outra versão aqui eu vou gerar ele aqui Gmail sem lá não vou botar aqui vou botar mesmo YouTube só que no lugar de MP4 vou colocar o Edi M também vamos salvar no mesmo lugar e vamos dar start encontra uma coisa que eu tinha falado anteriormente não dá continuidade eu tinha falado para você prestar muita atenção em relação à qualidade né vídeo principalmente 20 na verdade é uma sequência de imagens tá tá conversando ali no cantinho quando você pega um vídeo eu tenho a tendência a vacina eu quero que o cara assista 4K qualidade top aí tomar os pedais no teu site com a tua o teu plano de hospedagem mensal vai custar um fígado do teu cliente então assim por mais que você queira a qualidade top o seu cliente pediu hospedagem local dos seus vídeos primeiro tempo de evitar a gente vai ver umas opções para isso mas nunca o top mesmo porque isso vai te dar problema de custos tá então vídeo é 1080p se for quatro capas acima de 1080p nada de um super até mesmo você tá tendo nada de hospedar dentro do seu próprio site então ele já gerou os arquivos aqui para mim cara lembrei que não tem muita coisa para fazer basicamente isso aqui eu tenho o meu vídeo MP4 vou abrir outra história daqui ó que eu sei que tem na pasta vídeos cadê Aqui vídeos na minha pasta vídeos eu tenho aqui ó o arquivo MP4 corrigido né para o YouTube e webm vamos arrastar esses arquivos para cá dá uma olhada no que ele fez aqui eu gerei um arquivo m4v que é um arquivo também compatível mais compatível com o filme com YouTube ele gerou o arquivo webm tá só que aqui nesse caso Desse exemplo não foi tão feliz aqui a compreensão do entrei que eu tinha um arquivo de 11 MB gerei um outro de 12 e outro de 20 que foi webm então basicamente aqui ó vou botar aqui meu vídeo pronto MP4 e aqui também meu vídeo. M4v e vou morrer não viesse aqui também meu vídeo.