Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

background video travando

por Estudante
| 231.9k xp | 114 posts

boa noite gostaria de saber como posso solucionar o problema do vídeo travando neste link http://insanalobotomia.com/site/ mudar de formato ajuda ou tem outra solução

<div class="vd-container">


             <video class="img-responsive" src="video/sp.webm" autoplay loop />


   </div>
.vd-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:0px;
    height:0;
    overflow:hidden;
}

.vd-container video, .vd-container object, .vd-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
3 respostas
solução!
por Natan Souza
| 2117.1k xp | 3725 posts
Instrutor Product Design Lead

Oi Nicolle, tudo bem?

Tenta usar vídeos mais leves,arrisco dizer que é o tamanho que está causando essa lentidão.

Não sei se vi certo no codigo do site, mas parece que tem um elemento video dentro de outro, o uso correto para oferecer vários formatos é assim:

<video width="480" controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg">
  Your browser doesn't support HTML5 video tag.
</video>

E usar o atributo posteré bacana também. É só pegar o primeiro frame do video e colocar lá. Ai o video só começa a tocar quando tiver carregado, e enquanto isso a imagem de poster fica lá. Mais infos e outros atributos aqui no MDN sobre Video.

Espero ter ajudado,

Abcs!

por Estudante
| 231.9k xp | 114 posts

Natam diminui o tamanho do video nos navegadores melhoraram. Porém para dispositivo moveis. No iphone não aceita o formato webm fica com o simbolo de player cortado e android fica como se fosse uma foto. Como arrumar isso

por Natan Souza
| 2117.1k xp | 3725 posts
Instrutor Product Design Lead

Oi Nicolle,

Vi no stackoverflow que o iOS suporta MP4, mas precisa ver como você exportou exatamente, sei que precisa ser nesses sets que constam no tópico. Por isso precisa colocar o elemento video com aqueles diversos formatos como no código acima, pois se ele não suportar um dos sources, ele vai para o próximo e tenta novamente.

No Android aqui tem uma lista dos formatos de vídeo suportados pelo Android aqui.

Aparentemente também no Android, o autoplay não é permitido.

Abcs!