How to set the thumbnail image on HTML5 video?

Question

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!

Fart

Answer 1

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?

Godforsaken

For more information, see the MDN website: developer.mozilla.org/en-US/docs/Web/HTML/Element/video. The attribute is quite well supported. – Golda

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. – Funkhouser

Thanks. but there is another problem if i pause the video the poster is gone and the frame of the video becomes the poster. – Cake

Answer 2

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>

Tiger

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 :) – Lacunar

it works generally but not with preload="none" attribute of video tag. Thanks. – Protohuman

Does this code work for video extensions other than mp4 like avi etc? In my case it not works. – Steve

Answer 3

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)

Masakomasan

Only if the video was preloaded. Otherwise it will still show a black background on IE until the video was loaded by the browser! – Buehrer

How is 0.1s the first frame exactly? – Catalectic

Answer 4

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!

Fart

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

Devolve

Might not be using php? – Scrappy

Answer 6

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..
})

Kelwunn

Thank you. I did not use jQuery options for play but I can try. Do you have any good suggestions? – Dasilva

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(); :) – Kelwunn

Google may still penalize you if it thinks the video doesn't have a thumbnail image. – Janae

Answer 7

You need to use poster attribute in your video tag :

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

Muriel

Answer 8

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.

Arvid