2

De Que Maneira Posso criar Regra CSS para Mostrar na ScreenShot a Duração de um Vídeo

Exemplo

É esse efeito que procuro dar nas minhas, miniaturas. Atribuir Uma Marcação na Screen Shot exibindo o tempo de duração de um vídeo

Não sei se consegui me expressar direito, mas eu gostaria de saber uma forma de posicionar/colocar um dos elemento HTML <p>, <span> ou <div> dentro de uma div Pai, no canto inferior direito, para que o usuário se informe da duração do conteúdo.

Veja uma figura abaixo, exemplificando:

0

2 Respostas 2

3

O segredo é deixar o pai com position: relative e o filho com posição absoluta, assim o elemento filho será posicionado em relação ao pai (se este tiver o posicionamento definido).

Há várias formas de fazer, uma delas é a que você citou de criar um elemento para inserir e posicionar a duração. Na minha opinião, uma alternativa melhor é utilizar data attributes, assim você aproveita o próprio elemento no qual o vídeo (ou miniatura) está, sem precisar encher o html de <span> desnecessários.

Você pode recuperar o valor de um atributo data-alguma-coisa por meio da função attr() das CSS:

.video { position: relative }

.video > img { width: 100% }

.video::after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  content: attr(data-duration);
  padding: 4px 10px;
  pointer-events: none;
  position: absolute;
  bottom: 4%;
  right: 2%;
}
<div class='video' data-duration='5:00'>
  <img src='http://i.stack.imgur.com/OEbRf.jpg' alt=''>
<div>

2
  • Em qual navegador não funcionou? Olhei o data-attributes e attr() no "Can I Use" e parece OK. 25/06/2016 às 22:48
  • 1
    Caso interesse, tem isso aqui pra imagens ilustrativas: lorempixel.com - Tem mais parâmetros, mas veja um exemplo de uso rápido, já passando as medidas no URL: lorempixel.com/600/200 - acho prático pra pular a etapa de escolha, upload etc. (se bem que usar o imgur é mais seguro caso o serviço saia do ar).
    – Bacco
    9/07/2016 às 18:35
2

Durantes alguns minutos a mais na frente do meu PC, após a reposta de Renan que me trouxe com clareza, como obter o efeito desejado. Trago outra solução apenas de posicionamento do elemento HTML span dentro da div Pai, dando a posição da tarja onde poderá inserir o tempo de um vídeo.

Codigo

#pai p{
position:relative;
float:left;
font-size: 12pt;
font-weight: bold;
}

.filho p span{
position:absolute;
background-color: black;
color: #fff;
padding: 4px 10px;
position: absolute;
bottom: 4%;
right: 2%;
}
<div id="pai" class="filho">
<p>
<span>00:00</span>
<img src="https://img.youtube.com/vi/YQHsXMglC9A/hqdefault.jpg"/>
</p>
</div>

   

Esta informação(tempo do vídeo) no meu caso, busco com Javascript de um banco de dados(Array). Então eu só precisava, estilizar uma regra para div container nível de bloco e inserir/posicionar o elemento inline span.

2
  • 2
    Da pra fazer a mesma coisa com data attributes, basta trocar seu valor e isso pode ser feito com Javascript também. A diferença é que não vai precisar criar um elemento a mais no html somente para exibir a duração do vídeo. Mas tudo bem, se a sua solução foi a que melhor resolveu a situação, marque-a como correta. 26/06/2016 às 1:01
  • 1
    Está faltando um "display:block" pra esse span se comportar como elemento de bloco, o que me parece mais adequado para o seu caso (e facilita a estilização , posicionamento e alinhamento de texto na horizontal e vertical dependendo do caso).
    – Bacco
    9/07/2016 às 18:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .