Come impostare l'immagine in miniatura sul video HTML5?


119

C'è un modo per impostare l'immagine in miniatura sul video HTML5? Voglio vedere alcune foto prima di giocare. Il mio codice ha questo aspetto:

<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>

Grazie!

Risposte:


207

Aggiungi poster="placeholder.png"al tag 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>

Funziona?


1
Per ulteriori informazioni, vedere il sito Web MDN: developer.mozilla.org/en-US/docs/Web/HTML/Element/video . L'attributo è abbastanza ben supportato.
jehon

89

Visualizza il primo fotogramma del video come miniatura:

Aggiungi preload="metadata"al tag video e il secondo del primo fotogramma #t=0.5alla sorgente 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
Il problema con questo è che il video inizia da specificato #t=0.5. Di 'se volessi una miniatura da t = 8, allora il video inizierebbe dall'8 ° secondo, il che non è l'ideale, vero :)
Marko

23

Se vuoi un primo fotogramma del video come miniatura, puoi usarlo

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: assicurati del tuo tipo di video (es: mp4, ogg, webm ecc.)


4
Solo se il video è stato precaricato. Altrimenti mostrerà ancora uno sfondo nero su IE fino a quando il video non è stato caricato dal browser!
Hafenkranich

3

Quella sembra essere un'immagine in più mostrata lì.

Puoi provare a usarlo

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

Ora usando jQuery riproduci il video e nascondi l'immagine come

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

Grazie. Non ho usato le opzioni di jQuery per giocare, ma posso provare. Hai dei buoni suggerimenti?
Ivijan Stefan Stipić

Questo è il miglior suggerimento, usando questo puoi nascondere automaticamente l'immagine che veniva mostrata lì. E riproduci semplicemente il 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) aggiungi il seguente 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: nel primo src (mostrato) aggiungi il link originale di youtube.

2) modifica il tag iframe come:

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

nota: copia e incolla l'ID del video di YouTube dopo l'incorporamento / nell'iframe src.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.