Faça com que o pôster de vídeo HTML5 tenha o mesmo tamanho do próprio vídeo


93

Alguém sabe redimensionar o pôster do vídeo HTML5 de forma que ele se encaixe nas dimensões exatas do próprio vídeo?

aqui está um jsfiddle que mostra o problema: http://jsfiddle.net/zPacg/7/

aqui está aquele código:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>

CSS:

video{
border:1px solid red;
}​

Observe que o retângulo laranja não se ajusta à borda vermelha do vídeo.

Além disso, apenas adicionar o CSS abaixo também não funciona, pois redimensiona o vídeo junto com o pôster:

video[poster]{
height:100%;
width:100%;
}

1
não acho que você possa usar "%" nos atributos; no entanto, alterá-lo para 100 não corrige o problema. aposto que é um estilo de mídia webkit. sinta-se à vontade para escolhê-los trac.webkit.org/browser/trunk/Source/WebCore/css/…
Albert

@albert, obrigado. Não vejo nenhuma referência a posterno link que você enviou. Você pode me mostrar como é o CSS para o que você está falando, ou seja, " -webkit media style"? obrigado
tim peterson

bem, isso é o que eu quis dizer com "escolher"; esses são estilos de mídia específicos de cromo; estou apenas vagamente familiarizado com eles, quanto mais com os pseudo seletores que eles estão declarando; sem ponto de partida: eu procuraria declarações com preenchimento, etc.
Albert

Respostas:


49

Você pode usar uma imagem de pôster transparente em combinação com uma imagem de fundo CSS para conseguir isso ( exemplo ); entretanto, para ter um fundo esticado até a altura e largura de um vídeo, você terá que usar uma <img>tag posicionada absolutamente ( exemplo ).

Também é possível definir background-sizepara100% 100% em navegadores que suportambackground-size ( exemplo ).


Atualizar

A melhor maneira de fazer isso seria usar a object-fitpropriedade CSS, conforme sugere @Lars Ericsson.

Usar

object-fit: cover;

se você não quiser exibir as partes da imagem que não se ajustam à proporção do vídeo, e

object-fit: fill;

esticar a imagem para caber na proporção do seu vídeo

Exemplo


- @ user1419007, seu exemplo repete a imagem de fundo. Já que você sugere que essa não é a melhor maneira, você se importaria de fornecer um jsfiddle demonstrando como implementar sua segunda estratégia?
tim peterson

Eu no-repeateditei a imagem de fundo. Quanto à outra solução, dê-me um momento para resolver isso.
user2428118 01 de

Editar: exemplo adicionado para a segunda solução proposta.
user2428118 01 de

obrigado por isso, precisamos de algum javascript para alterar o z-indexda imagem de modo que o vídeo seja visível quando você começar a reproduzi-lo.
tim Peterson

2
.. o segundo exemplo não funcionou no cromo? você precisa dar ao div externo uma posição como jsfiddle.net/xh8er ; então funciona.
commonpike

87

Dependendo de quais navegadores você está alvejando, você pode ir para a propriedade de ajuste de objeto para resolver isso:

object-fit: cover;

ou talvez fillseja o que você está procurando. Ainda em consideração para o IE .


3
Esta é definitivamente a resposta.
cilphex

1
+1 para o link para a propriedade de ajuste de objeto , usando object-fit: initialfez isso para mim.
FireBrand

"object-fit: fill" resolveu o problema! assim como "ajuste ao objeto: inicial" (estranhamente, porque não vejo um valor "inicial" na especificação em developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Tanto "cobrir" quanto "conter" distorceram o pôster em exibição no navegador nativo da Samsung no Android 5.1.1. E isso não afeta o IE!
plugincontainer de

1
Qual seletor de css vocês almejaram para a regra de ajuste de objeto? Como não há como direcionar a imagem do pôster, presumo que você usou video{object-fit: cover;}?
zıəs uɐɟəʇs

@ zıəs uɐɟəʇs No meu css é ... vídeo [poster] {object-fit: fill}
plugincontainer

27

Ou você pode usar simplesmente o preload="none"atributo para tornar o fundo do VÍDEO visível. E você pode usar background-size: cover;aqui.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

2
melhor resposta. não quebra nada e não pré-carregar um vídeo realmente não prejudica sua página, a menos que seja um site centrado em vídeo. +1.
totalmenteNotLizards

1
Tive redimensionamento de fundo no jogo em celulares. De outras perguntas / respostas aqui (por exemplo, stackoverflow.com/questions/18229974/… ) parece que o problema é a duplicação de imagens (o fundo css do player e o pôster do elemento de vídeo). Essa correção funcionou.
plugincontainer de

1
Hmm ... funcionou no Chrome, mas criou um novo problema no navegador Android nativo. Consulte: stackoverflow.com/questions/39546792/…
plugincontainer

Finalmente corrigido - veja a resposta de Lars Ericsson abaixo
plugincontainer

27

Eu estava brincando com isso e tentei todas as soluções, eventualmente a solução que eu escolhi foi uma sugestão do Inspetor do Google Chrome. Se você adicionar isso ao seu CSS, funcionou para mim:

video{
   object-fit: inherit;
}

Obrigado! Esta foi a correção exata que eu estava procurando para REMOVER a lacuna do vídeo na parte superior e inferior
cpcdev

11

Minha solução combina as respostas do user2428118 e do Veiko Jääger, permitindo o pré-carregamento, mas sem a necessidade de uma imagem transparente separada. Em vez disso, usamos uma imagem transparente de 1 px codificada em base64.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Precisa ser apenas o nome da imagem ou o caminho completo?

No navegador nativo do Android (o navegador é chamado de "Internet") no meu Samsung, o pôster foi redimensionado ... catastroficamente no jogo. Esta solução - um gif transparente como pôster e o "pôster" como fundo - resolveu isso, MAS, .. agora o pôster não é mais exibido no IE-9, 10 ou 11.
plugincontainer

1
A solução foi abandonar o gif transparente e o pôster como plano de fundo e usar (veja a resposta de Lars Ericsson acima) vídeo [pôster] {objeto-ajuste: preencher}. Resolvido o problema no navegador nativo da Samsung no Android 5.1.1. e o IE exibe pôster sem problemas
plugincontainer

Essa abordagem é melhor especialmente para dispositivos móveis. object-fitnão evita as distorções de tamanho selvagem do posterque acontecem no Android enquanto o conteúdo ainda está carregando.
TheLinguist

5

Tive essa ideia e funciona perfeitamente. Ok, basicamente queremos livrar-nos do primeiro quadro dos vídeos e depois redimensionar o pôster para o tamanho real dos vídeos. Se definirmos as dimensões, concluímos uma dessas tarefas. Então, apenas um permanece. Portanto, agora, a única maneira que conheço de me livrar do primeiro quadro é realmente definir um pôster. No entanto, vamos dar ao vídeo um falso, que não existe. Isso resultará em uma tela em branco com o fundo transparente. Ou seja, o plano de fundo de nosso div pai ficará visível.

Simples de usar, no entanto, pode não funcionar com todos os navegadores da web se você quiser redimensionar a dimensão do plano de fundo do div para a dimensão do vídeo, pois meu código está usando "tamanho de plano de fundo".

HTML / HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

isso é inteligente, eu tentei. Não é perfeito, mas chegando lá ... jsfiddle.net/trpeters1/NJtc9
tim peterson

Sim você está certo. Olhando para o seu jsfiddle, agora percebo que a dimensão do vídeo também deve estar correta e não apenas o elemento de vídeo. Acho que tive sorte quando experimentei na minha página.
Jonathan J

5
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Cobrir

video{
   object-fit: cover; /*to cover all the box*/
}

Preencher

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Observe que os controles de vídeo estão sobre nossa imagem , portanto, nossa imagem não é exibida completamente. Se você estiver usando uma capa de ajuste de objeto, edite sua imagem em um aplicativo visual como photoshop e adicione um conteúdo de fundo de margem.


1

Tive um problema semelhante e resolvi-o criando uma imagem com a mesma proporção do meu vídeo (16: 9). Minha largura está definida para 100% na tag de vídeo e agora a imagem (320 x 180) se encaixa perfeitamente. Espero que ajude!


1

Você pode redimensionar o tamanho da imagem após gerar o polegar

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

1

Você pode usar pôster para mostrar a imagem em vez do vídeo no dispositivo móvel (ou dispositivos que não suportam a funcionalidade de reprodução automática de vídeo). Porque os dispositivos móveis não oferecem suporte à funcionalidade de reprodução automática de vídeo.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Agora você pode definir o estilo do atributo poster que está dentro da tag de vídeo para dispositivo móvel por meio de consulta de mídia.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

Na verdade, o iOS 10+ oferece suporte à funcionalidade de reprodução automática de vídeo com o atributo playsinline.
Lukas Petr de

Como você especifica esse atributo?
Khom Nazid

0
height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

0

Funcionou

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

E o CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

0
  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.