Estou usando um vídeo usando a biblioteca material design bootstrap
O problema é que a qualidade do vídeo fica diferente quando eu rodo no browser e em um player de vídeo:
Imagem no browser:
Imagem no player de video:
Meu codigo html:
<section class="view intro-video">
<a class="ancoraDesceConteudo" href="#sobreApp">
<i class="fa fa-hand-o-down icondesceconteudo animated bounce infinite" aria-hidden="true"></i>
</a>
<video poster="https://i.imgur.com/3QIi6Xd.jpg" oncanplay="this.muted=true" playsinline autoplay muted loop>
<source src=".../../assets/animals.mp4">
</video>
</section>
Meu css:
.view img, .view video {
position: relative;
display: block;
min-width: 100%!important;
}
.intro-video{
height: inherit;
}
.ancoraDesceConteudo{
display: flex;
justify-content: center;
}
Tem alguma técnica pra melhorar a imagem no browser ou alguma explicação que torne a imagem tão diferente assim no browser e no player?
filter
no seu elemento, se não foi no vídeo talvez em algum elemento pai do vídeo...