Vídeos em hospedagem própria - @Curso em Vídeo HTML5 e CSS3

E chegou a hora da gente colocar vídeos no nosso site que a primeira técnica a gente vai utilizar mas para isso você tem que estar em mãos com Capítulo 11 e também com os últimos vídeos que a gente baixou e já converteu nas últimas aulas [Música] a E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula do seu curso de HTML5 css3 a gente tá falando sobre vídeos Está no capítulo sobre mídias já falamos um pouco sobre formatos de vídeo já te ensinei como fazer conversão não vou te ensinar mais na verdade eu usei um outro conversou aqui eu já gerei o arquivo AGV você quiser um conversor pode ver eu fiz diretamente por um site que só você procurar por conversores em uma GG ou conversor pode ver e você com certeza vai conseguir também fazer hoje era o computador pra gente ver Em que momento que a gente parou antes de dar continuidade a esse vídeo eu tenho um recado bem rápido para te dar como você já deve saber esse curso de desenvolvimento web que tá caprichado por sinal só está sendo possível graças ao apoio de algumas empresas queridas do meu coração e aos poucos conforme o curso foi avançando você vai conhecendo algumas iniciativas e oportunidades que elas estão trazendo para você que ela só Luna que não consegui e dessa vez eu vim aqui falar da Record que é uma organização social há 25 anos de vida no ano que eu tô gravando esse vídeo e o seu objetivo principal é promover o que eles chamam de empoderamento digital eu ainda vou mostrar umas histórias bem emocionantes por aqui você não perde por esperar e para você que é nosso aluno do curso em vídeo a Record tá trazendo uma série de cursos grátis de tecnologia que vão deixar você mais preparado ou preparada para entrar no mercado de trabalho e para ter acesso a esses cursos e outras oportunidades que a Record Vai disponibilizar durante o andamento desse curso é só você apontar a câmera do seu celular por código que tá aparecendo aqui na tela e Olimpo também vai estar disponível na descrição desse vídeo Obrigado repúdio pelo Patrocínio e pelo apoio constante em toda essa curso de HTML e CSS em muitos outros projetos do curso em vídeo que estão por vir então é só basicamente o que eu tenho aqui é o seguinte a gente já tá com documentos estudos HTML exercícios não existo 12 em mídia da última aula que mostrei como pegar um arquivo MP4 converter m4v e webm eu também gerei o arquivo é como eu disse eu só abrir um navegador e fiz assim ó conversor hoje ver aí tem aqui o que eu usei foi esse daqui você pode usar outros também tá é só você arrastar o vídeo para cá e mandar converter ele vai deixar você fazer o download do arquivo a gente vê se não vai se preocupar tanto com isso aqui não mas né Lembra que você vê a compatibilidade é bem pequenininha com alguns navegadores mas colocamos aqui para falar agora porque eu tenho que ter o vídeo em vários formatos porque os navegadores eles são compatíveis com determinados formatos então muito cuidado com isso que pode ser que funciona em um computador que não funciona em outro que a gente vai discutir sobre vídeos hospedados localmente aguenta aí que a gente aceitou isso no vídeo anterior pra gente vai bater papo sobre isso no próximo vídeo se eu não me engano então eu já tenho os vídeos em todos os formatos outra coisa que eu fiz aqui no Gimp inclusive é eu gerei uma capa né eu gerei uma Tumblr para o meu vídeo uma também personalizado aqui uma tá mosquito Limões é um vídeo sobre Limões Então tá lá desenhei isso aqui no Game fiscal em png certo que nós vamos fazer vamos voltar aqui na pasta de exercícios e vamos criar um HTML botão direito em exercício 12 abrir com Cold agora gente vai fazer um código para poder colocar esses vídeos na tela já tem uma pasta meio-dia cá deixa eu fazer uma outra coisa que também é dentro da pasta de esses 02 eu vou criar uma pasta imagem imagens nessa pasta imagens eu vou ter também esse arquivo que isso Minimizar ele o Jorge de Cold vou arrastar essa imagem aqui que eu criei no Limpo até apagar ela agora que eu já tenho ela aqui na minha pasta Imagem Beleza então vamos voltar com visual Studio code eu já tenho aqui as imagens eu tenho aqui minha média vou criar na pasta principal só não pode abrir nenhuma nem outra eu tenho que fechar as pastinhas clicar aqui fora pode criar né era nem precisa fechar Mas enfim cliquei aqui fora e vou criar novo arquivo que é o index. hr ML Beleza já tô congelar Vamos criar o código base em português Brasil vídeos com h 15 para um inserindo vídeos hospedados localmente botão parágrafo embaixo e ter vídeo está hospedado no meu próprio servidor beleza vamos ver se tá funcionando vou abrir aqui Windows clique em duas vezes falar chegando vídeos e tal já tá lá com a imagem não o espelho do vídeo hospedados localmente esse vídeo está hospedado no meu próprio servidor deles na verdade ele não apareceu nenhum é porque eu não coloquei vídeo nenhum para colocar um vídeo simples porta aqui ó vídeo ele vai te sugerir da forma mais simples assim como o áudio visual Studio code sugere Vamos colocar aqui ó contra o espaço dentro de mídia eu tenho que sei lá meu vídeo. MP4 alisei e ele foi Nossa Senhora gigante porque tá de 720p E se ela puxa Cadê o vídeo Cadê o negócio que eu só botar aqui uma largura líder a 500 aqui a então o vídeo tá lá você viu que não tem necessidade quero baixo em 720p e ele ficou um arquivo gigante aqui na minha página não tinha que reduzir reduzir aqui não significa que ele reduzir o tamanho não é aquele mesmo arquivo de 20 tantos Mega que eu tô tendo que baixar para mostrar um vídeo porque ninguém de 500 então não faz sentido ficar baixando vídeos 4K para poder colocar ela e tudo mais outra coisa que você não tá vendo é o play aqui né então tem que ter mesma coisa que o áudio só voltar com trolls e tá lá então esse aqui é a visualização para o Google Chrome cada navegador vai te dar uma visualização diferente tá lá o vídeo tá funcionando sem problema vamos testar os outros eu sei que o Google Chrome é compatível com todos os outros vamos botar aqui.

M4v m4v também Funcionou perto você vê que não tem tantas diferenças também vamos testar o webm vamos ver se vai gerado pelo reino do Break também Funcionou vamos fazer ou hoje ver que eu usei o conversor não vê se ele Já carregou também tá dando Play sem problema é só falar poxa mas qual deles eu boto na verdade eu vou te dar dica coloque todos a porque cada navegador pode ser pode ser assim a funcionou aqui no meu Ah então vai funcionar todo mundo não vai Carlos no Safari por exemplo um AGV o Safari ele não é compatível com GV Então esse arquivo aqui se eu boto isso daqui ele não abre ele abre o Google Chrome mas ele não abre no Safari por exemplo a mas ninguém usa Safari que todo o proprietário do iPhone usa Safari por mais que seja igual a não mas eu não sabe no meu iPhone Eu uso o Google Chrome não a base é o Safari tá então tem que tomar muito cuidado com isso para isso não adianta fazer dessa forma sempre nós vamos fazer aqui uma tag vídeo mesmo esquema que a gente fez antes eu vou tirar esse daqui e nós vamos fazer o seguinte eu vou botar o controle aqui eu tenho que criar alguns Horses dentro igualzinho ó sorte vou botar o suas src aqui nessa RC control espaço mídia que você vai colocar Qual o vídeo você quer tentar primeiro eu vou fazer o seguinte eu vou dar uma olhada aqui ó dentro de mídia é deixa eu ver aqui em exibir eu quero detalhes aqui qual é o vamos organizar por tamanho clique aqui ó em tamanho o menor ela MP4 Então vamos colocar aqui no meu caso tá vamos fazer aqui o primeiro eu e quatro Nossa polêmica quatro proteína 4 MP4 é isso e o meu tipo aqui para MP4 é vídeo/MP4 Posso criar outro esforços para arquivo minha depois veio o m4v Então vou botar quente quatro vezes vídeo MP4 também só src mídia tô sempre atentando contra o espaço tá depois vamos para o webm video da webcam e sóis src mídia o último ali pode ver aí vídeo barra ao GG aquela cirurgia que é o padre e aqui por fim assim como eu fiz um áudio vou pegar um parágrafo dizendo seu navegador não tem compatibilidade com reprodução de vídeos vamos atualizar ela ficou gigante vamos se sair daqui é tudo aqui ó Whindersson 500 configurar largura tá lá a outra coisa que é legal você pode fazer na hora que atualiza ele para no primeiro frame que ficou feio aqui você pode vir aqui ó e colocar os ter e dizer onde é que tá o pôster ao contra o espaço imagens Limões capa foi aquele aquele que eu criei no total o vídeo tá lá Limões Quando aperto o play ele reproduz o vídeo e aí volto a dizer a ordem aqui tem Total influência ele primeiro Tenta carregar esse daqui Se não for compatível ele tenta o segundo se não for compatível terceiro se não for compatível a 500 fez quantos você quiser colocar caso nenhum desses daqui de cima sejam compatíveis ele vai mostrar o seu navegador não tem compatibilidade então quanto mais sócios você colocar aqui muito mais arquivos você tiver convertidos em testados maior é a compatibilidade com vários navegadores maior compatibilidade para vários usuários beleza só que aí tem um pequeno problema vamos fazer uma conta e dá uma olhadinha aqui eu tô com meu gerenciador de arquivos vamos pegar pelo menor tá meu vídeo ponta MP4 ele tem 11. 5 mega 11. 5 mega 11.

5 mega se eu tenho e vou abrir aqui a calculadora calculadora 11. 5 11,5 x sei lá seu site tem um acesso normal de aproximadamente mil pessoas por dia mil você tem 11. 500 cá de download 11.

500 calão 11. 500 Mega / mi-24 né já que é múltiplo você tem 11 giga 11.