video.js responsive not working

Tenho usado vídeo.js por um tempo e estava procurando uma solução responsiva. Eu vi que 4.6 afirmava ser assim, mas não pode começar a trabalhar. E não encontro nada na documentação sobre fazê-la responder. Basicamente, só preciso que fique a 100% do contentor e mantenha a sua proporção. Se eu deixar a largura/altura fora dela por omissão é pequeno. 100% vai trabalhar em largura, mas não sei o que colocar para a altura. Tentei usar o CSS na identificação do vídeo, mas não resultou.

A daverupert.com o método funciona para a versão mais antiga do vídeo.js mas não funcionaria com 4.6.

Se estiver documentado em algum lugar, um link seria útil ou qualquer ideia de como alguém fez o vídeo.js 4.6 responsivo.

Além disso, a animação de carregamento não aparece.

Author: astonishedman, 2014-06-18
Source

4 answers

Este é o código que uso para todos os meus jogadores sensíveis.

Primeiro adicione um invólucro responsivo

<div class="video-js-responsive-container vjs-hd">
    <video .... standard videojs code ... >
        ... sources ...
    </video>
</div>

Uso vjs-hd e vjs-sd para diferenciar entre 16: 9 e 4:3

Em seguida, configurar as classes e css para ele 

.video-js-responsive-container.vjs-hd {
    padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
    padding-top: 75%;
}
.video-js-responsive-container {
    width: 100%;
    position: relative;
}
.video-js-responsive-container .video-js {
    height: 100% !important; 
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

Eu sei que usar {[[2]} é desaprovado, mas é confiável quando se substitui outras classes css.

A classe espectral video-js-resonsive-container irá automaticamente dimensioná - la até 100% do recipiente original mantendo uma altura em relação com a largura.

Adaptado de: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

 11
Author: b.kelley, 2014-06-25 16:15:05

Pode adicionar isto à configuração dos dados: 

data-setup='{"fluid": true}'

Ou dependendo das suas proporções / proporções de vídeo, adicione a seguinte classe ao Contentor que faz a mesma coisa: 

vjs-16-9

Ou 

vjs-4-3

Este codepeno é outra abordagem

Https://codepen.io/dotdreaming/pen/CnLeD

 3
Author: user3893613, 2017-10-03 18:29:41

Você pode facilmente mudar o css da barra de controle para fazer o jogador responsivo. Uma maneira é usar as consultas de mídia. Fi-lo por aqui e funcionou.

 0
Author: Hussnain Cheema, 2014-08-17 13:48:35

Abaixo está o código completo sugerido pelos VideoJS com os outros formatos de ficheiro declarados 

  Below is the full code suggested by VideoJS with the other file formats declared

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 -1
Author: Lyle, 2014-06-18 16:23:05