Bagaimana cara mengatur gambar thumbnail pada video HTML5?

119

Apakah ada cara untuk mengatur gambar thumbnail pada video HTML5? Saya ingin melihat beberapa gambar sebelum bermain. Kode saya terlihat seperti ini:

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

Terima kasih!

Ivijan Stefan Stipić
sumber

Jawaban:

207

Tambahkan poster="placeholder.png"ke 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>

Apakah itu bekerja?

Jason Brooks
sumber
1
Untuk informasi lebih lanjut, lihat situs web MDN: developer.mozilla.org/en-US/docs/Web/HTML/Element/video . Atribut tersebut didukung dengan cukup baik.
jehon
89

Tampilkan Video Anda Bingkai Pertama sebagai Thumbnail:

Tambahkan preload="metadata"ke tag video Anda dan yang kedua dari bingkai pertama #t=0.5ke sumber video Anda :

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

David Ben Dahan
sumber
11
Masalah dengan ini adalah bahwa video dimulai dari yang ditentukan #t=0.5. Katakanlah jika Anda menginginkan thumbnail dari t = 8 dengan baik maka vid akan mulai dari detik ke-8 yang tidak ideal kan :)
Marko
23

Jika Anda ingin bingkai video pertama sebagai thumbnail, daripada yang dapat Anda gunakan

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>

CATATAN: pastikan tentang jenis video Anda (mis .: mp4, ogg, webm dll)

PVCS
sumber
4
Hanya jika video itu dimuat sebelumnya. Jika tidak, itu akan tetap menampilkan latar belakang hitam di IE hingga video dimuat oleh browser!
Hafenkranich
3

Sepertinya ada gambar tambahan yang ditampilkan di sana.

Anda dapat mencoba menggunakan ini

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

Sekarang menggunakan jQuery, putar video dan sembunyikan gambar sebagai

$('img').click(function () {
  $(this).hide();
  // use the parameters to play the video now..
})
Afzaal Ahmad Zeeshan
sumber
Terima kasih. Saya tidak menggunakan opsi jQuery untuk bermain tetapi saya dapat mencoba. Apakah Anda punya saran bagus?
Ivijan Stefan Stipić
Ini adalah saran terbaik, dengan menggunakan ini Anda dapat secara otomatis menyembunyikan gambar yang sedang ditampilkan di sana. Dan cukup putar videonya menggunakan $('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>
merendahkan
sumber
-1

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

Hardik Shah
sumber
-1

1) tambahkan jquery di bawah ini:

$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
 }
);

catatan: di src pertama (ditampilkan) tambahkan tautan youtube asli.

2) edit tag iframe sebagai:

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

Catatan: copy paste id video youtube setelah embed / di iframe src.

ashwinrishipj
sumber