Fazer o pôster de vídeo HTML5 ser do mesmo tamanho que o próprio vídeo
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;
}
Repare que o rectângulo laranja não se aproxima do limite vermelho do vídeo.
Além disso, apenas adicionar o CSS abaixo também não funciona, pois ele Rescala o vídeo junto com o cartaz:
video[poster]{
height:100%;
width:100%;
}
11 answers
Pode usar uma imagem de cartaz transparente em combinação com uma imagem de fundo CSS para conseguir isso (exemplo); no entanto, para ter um fundo esticado à altura e à largura de um vídeo, terá de usar uma marca completamente posicionada <img>
(exemplo ).
Também é possível set background-size
para 100% 100%
em navegadores que suportam background-size
(exemplo).
Dependendo dos navegadores a que se destina, pode optar pela propriedade para resolver isto:
object-fit: cover;
Ou talvez seja o que procuras. Ainda em estudo para IE .
Ou pode usar simplesmente 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>
video{
object-fit: inherit;
}
<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>
Simples de usar, no entanto, pode não funcionar com todos os navegadores da web se quiser dimensionar a dimensão do fundo do div para a dimensão do vídeo, Uma vez que o meu código está a usar "Tamanho 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);
}
Pode usar um cartaz para mostrar a imagem em vez de Vídeo num dispositivo móvel(ou dispositivos que não suportam a funcionalidade de auto-reprodução de vídeo). Porque os dispositivos móveis não suportam a funcionalidade de autoplay 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 apenas estilar o atributo poster que está dentro da tag de vídeo para dispositivo móvel através de pesquisa 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;
}
}
Eu tinha um problema semelhante e acabei de corrigi-lo criando uma imagem com a mesma proporção do meu vídeo (16:9). A minha largura está definida a 100% na etiqueta de vídeo e agora a imagem (320 x 180) encaixa perfeitamente. Espero que isso ajude!
Poderá 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);
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;
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
Sorry, your browser doesn't support embedded videos.
</video>
Cobertura
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*/
}
Note que os controles de vídeo estão sobre a nossa imagem, então a nossa imagem não é mostrada de forma completa. Se você estiver usando a capa de ajuste de objeto, edite sua imagem em um aplicativo visual como photoshop e adicione um conteúdo de fundo de margem.