Different image colors when applied in a <video> tag

Asked

Viewed 44 times

2

I’m using a video using the library material design bootstrap

The problem is that the video quality looks different when I run in the browser and in a video player:

Image in the browser:

inserir a descrição da imagem aqui

Image in video player:

inserir a descrição da imagem aqui

My html code:

<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>

My css:

.view img, .view video {
    position: relative;
    display: block;
    min-width: 100%!important;
}

.intro-video{
    height: inherit;
}

.ancoraDesceConteudo{
    display: flex;
    justify-content: center;
}

There is some technique to improve the image in the browser or some explanation that makes the image so different in the browser and the player?

html css

  • That’s funny. I’ve tried several videos in the browser and never saw a difference when running on a :D player

  • It seems to me you’ve applied some filter in its element, if not in the video maybe in some parent element of the video...

  • Make sure the material design bootstrap is not using any Filtre type as @hugocsl commented: https://mdbootstrap.com/docs/jquery/content/images/#overlays

  • I tested it here and it was normal. The problem is some other CSS you are using there. MDB does not put this effect by default in the videos no! Put your entire CSS there that will help you answer

  • Apparently it is the browser, when I use Opera the image becomes clearer, terrible, when I use firefox becomes normal, I wanted to know how to fix it in opera, I think it is some configuration

1 answer

0

What can it be:

  • The referenced video is not in good quality; (you said that’s not it)
  • You applied some filter to the video parent element or to the video itself;
  • The video is in good quality but for smaller screens;

Possible solutions:
- Check out the question of filters.
- See the video size and if you’re not expanding it too much.
- In the worst of the hypotheses, use the video for Youtube and reference there.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.