195

Is there a way to set thumbnail image on HTML5 video? I want to see some pictures before play. My code looks like this:

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

Thanks!

8 Answers 8

365

Add poster="placeholder.png" to the video tag.

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

Does that work?

3
  • 4
    For more information, see the MDN website: developer.mozilla.org/en-US/docs/Web/HTML/Element/video. The attribute is quite well supported.
    – jehon
    Jun 11, 2020 at 20:16
  • 3
    Just FYI, the "poster" is different from the video thumbnail that gets embeded inside the video file. Yes, this is semantics here, for most people they think about a "thumbnail" in the html which is really the HTML5 poster attribute and does not exist inside the video file. To solve the video thumb problem the answers below regarding setting the start frame are what you need to do.
    – cakidnyc
    Oct 1, 2020 at 18:03
  • Thanks. but there is another problem if i pause the video the poster is gone and the frame of the video becomes the poster. Oct 29, 2021 at 15:13
171

Display Your Video First Frame as Thumbnail:

Add preload="metadata" to your video tag and the second of the first frame #t=0.1 to your video source:

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

5
  • 28
    The issue with this is that the video starts from specified #t=0.5. Say if you wanted thumbnail from t=8 well then vid would start from 8th second which is not ideal is it :)
    – Marko
    Apr 18, 2019 at 10:31
  • 1
    it works generally but not with preload="none" attribute of video tag. Thanks.
    – Kamlesh
    Oct 12, 2020 at 12:44
  • Does this code work for video extensions other than mp4 like avi etc? In my case it not works.
    – ganesh
    May 26, 2022 at 10:00
  • Using 0.1 instead of 0.5 seems to work (I only tested on iphone->brave) Apr 23 at 4:57
  • Thanks @AlbertRenshaw , I've adapted the answer :) Jun 20 at 12:34
36

If you want a video first frame as a thumbnail, than you can use

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>

NOTE: make sure about your video type(ex: mp4, ogg, webm etc)

2
  • 4
    Only if the video was preloaded. Otherwise it will still show a black background on IE until the video was loaded by the browser! Jul 10, 2017 at 7:39
  • 2
    How is 0.1s the first frame exactly? Sep 15, 2021 at 15:54
8

I found the solution that I got from your example and other examples and made ​​this:

<video id="video1" width="470" height="264" poster="video_poster.jpg" onclick="playPause()">
    <source src="video.mp4" width="470" height="264" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="264">
        <param name="movie" value="video.swf">
        <param name="quality" value="high">
        <param name="wmode" value="opaque">
        <param name="swfversion" value="11.0.0.0">
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name="expressinstall" value="../../Scripts/expressInstall.swf">
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="video.swf" width="500" height="500">
            <!--<![endif]-->
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="11.0.0.0">
            <param name="expressinstall" value="../../Scripts/expressInstall.swf">
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p>
                    <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a>
                </p>
            </div>
            <!--[if !IE]>-->
        </object>
        <!--<![endif]-->Unfortunately Your browser is old and does not support full video experience. </object>
</video>
<script>
var myVideo = document.getElementById("video1");
var att = document.createAttribute("poster");
if(myVideo.error) {
    switch(myVideo.error.code) {
        case MEDIA_ERR_NETWORK:
            alert("Network error - please try again later.");
            break;
        case MEDIA_ERR_DECODE:
            alert("Video is broken..");
            break;
        case MEDIA_ERR_SRC_NOT_SUPPORTED:
            alert("Sorry, your browser can't play this video.");
            break;
    }
} else {
    function playPause() {
        if(myVideo.paused) {
            myVideo.play();
            att.value = "";
            myVideo.setAttributeNode(att);
        } else myVideo.pause();
    }
}
</script>

Fantastic work. Thanks!

5
<?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
  • Might not be using php?
    – BritishSam
    Jan 26, 2022 at 10:10
4

That seems to be an extra image being shown there.

You can try using this

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

Now using jQuery play the video and hide the image as

$('img').click(function () {
  $(this).hide();
  // use the parameters to play the video now..
})
3
  • Thank you. I did not use jQuery options for play but I can try. Do you have any good suggestions? Nov 19, 2013 at 16:51
  • This is the best suggestion, using this you can automatically hide the image that was being shown there. And simply play the video using $('video').play(); :) Nov 19, 2013 at 16:55
  • Google may still penalize you if it thinks the video doesn't have a thumbnail image.
    – RashaMatt
    Nov 29, 2022 at 20:35
1

1) add the below 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
 }
);

note: in the first src (shown) add the original youtube link.

2) edit the iframe tag as:

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

note: copy paste the youtube video id after the embed/ in the iframe src.

1

You need to use poster attribute in your video tag :

            src="example.com"
            poster="/video-thumbnail.png"

Not the answer you're looking for? Browse other questions tagged or ask your own question.