¿Cómo configurar la imagen en miniatura en un video HTML5?


119

¿Hay alguna forma de configurar una imagen en miniatura en un video HTML5? Quiero ver algunas fotos antes de jugar. Mi código se ve así:

<video width="470" height="255" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

¡Gracias!

Respuestas:


207

Agregar poster="placeholder.png"a la etiqueta de video.

<video width="470" height="255" poster="placeholder.png" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

¿Eso funciona?


1
Para obtener más información, consulte el sitio web de MDN: developer.mozilla.org/en-US/docs/Web/HTML/Element/video . El atributo está bastante bien soportado.
jehon

89

Muestra el primer fotograma de tu video como miniatura:

Agregue preload="metadata"a su etiqueta de video y el segundo del primer fotograma #t=0.5a su fuente de video :

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>


11
El problema con esto es que el video comienza desde lo especificado #t=0.5. Digamos que si quisiera una miniatura de t = 8, entonces el video comenzaría desde el octavo segundo, lo cual no es ideal, ¿verdad :)
Marko

23

Si desea un primer fotograma de video como miniatura, puede usar

Add #t=0.1 to your video source, like below

<video width="320" height="240" controls>
  <source src="video.mp4#t=0.1" type="video/mp4">
</video>

NOTA: asegúrese de su tipo de video (por ejemplo: mp4, ogg, webm, etc.)


4
Solo si el video fue precargado. De lo contrario, seguirá mostrando un fondo negro en IE hasta que el navegador cargue el video.
Hafenkranich

3

Parece que se muestra una imagen adicional allí.

Puedes intentar usar esto

<img src="/images/image_of_video.png" alt="image" />
/* write your code for the video here */

Ahora, usando jQuery, reproduzca el video y oculte la imagen como

$('img').click(function () {
  $(this).hide();
  // use the parameters to play the video now..
})

Gracias. No utilicé las opciones de jQuery para jugar, pero puedo intentarlo. ¿Tiene alguna buena sugerencia?
Ivijan Stefan Stipić

Esta es la mejor sugerencia, con esto puedes ocultar automáticamente la imagen que se estaba mostrando allí. Y simplemente reproduzca el video usando $('video').play();:)
Afzaal Ahmad Zeeshan

3
<?php
$thumbs_dir = 'E:/xampp/htdocs/uploads/thumbs/';
$videos = array();
if (isset($_POST["name"])) {
 if (!preg_match('/data:([^;]*);base64,(.*)/', $_POST['data'], $matches)) {
  die("error");
 }
 $data = $matches[2];
 $data = str_replace(' ', '+', $data);
 $data = base64_decode($data);
 $file = 'text.jpg';
 $dataname = file_put_contents($thumbs_dir . $file, $data);
}
?>
//jscode
<script type="text/javascript">
 var videos = <?= json_encode($videos); ?>;
 var video = document.getElementById('video');
 video.addEventListener('canplay', function () {
     this.currentTime = this.duration / 2;
 }, false);
 var seek = true;
 video.addEventListener('seeked', function () {
    if (seek) {
         getThumb();
    }
 }, false);

 function getThumb() {
     seek = false;
     var filename = video.src;
     var w = video.videoWidth;//video.videoWidth * scaleFactor;
     var h = video.videoHeight;//video.videoHeight * scaleFactor;
     var canvas = document.createElement('canvas');
     canvas.width = w;
     canvas.height = h;
     var ctx = canvas.getContext('2d');
     ctx.drawImage(video, 0, 0, w, h);
     var data = canvas.toDataURL("image/jpg");
     var xmlhttp = new XMLHttpRequest;
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         }
     }
     xmlhttp.open("POST", location.href, true);
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
 }
  function failed(e) {
     // video playback failed - show a message saying why
     switch (e.target.error.code) {
         case e.target.error.MEDIA_ERR_ABORTED:
             console.log('You aborted the video playback.');
             break;
         case e.target.error.MEDIA_ERR_NETWORK:
             console.log('A network error caused the video download to fail part-way.');
             break;
         case e.target.error.MEDIA_ERR_DECODE:
             console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
              break;
          case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
              console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
              break;
          default:
              console.log('An unknown error occurred.');
              break;
      }


  }
</script>
//Html
<div>
    <video   id="video" src="1499752288.mp4" autoplay="true"  onerror="failed(event)" controls="controls" preload="none"></video>
</div>

-1

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.youtube.com/watch?v=Ulp1Kimblg0">
</video>


-1

1) agregue el siguiente jquery:

$thumbnail.on('click', function(e){
 e.preventDefault();
 src = src+'&autoplay=1'; // src: the original URL for embedding 
 $videoContainer.empty().append( $iframe.clone().attr({'src': src}) ); // $iframe: the original iframe for embedding
 }
);

nota: en el primer src (mostrado) agregue el enlace de youtube original.

2) edite la etiqueta iframe como:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>

nota: copie y pegue la identificación del video de youtube después de la inserción / en el iframe src.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.