How to Set the Thumbnail Image on HTML5 Video

How to set the thumbnail image on HTML5 video?

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?

video html5: Is it possible to display thumbnail from video on a specific time?

Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )

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

$(document).ready(function() {

            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() {
                 this.currentTime = time;
                 video_obj = this;

            }, false);

            document.getElementById('video').addEventListener('loadeddata', function() {
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            }, false);

        });

Source 1
Source 2

How To show video thumbnail on mobile when using video tag html5

Try to add videos in following format as well.

• webm(vp8/vorbis)
• mp4(h264/aac)

It seems Chrome mobile prefers webm if it can get it.

Safari (and probably iOS) will not play a video unless served by a server supporting byte-ranges. Apache, nginx and Amazon S3 for example do support them, but many smaller web servers (like WSGI servers) do not.

If browser able to detect the video then, thumbnail should show.

You can try this plugin Fancy app too.

This plugin will overcome the browser/device compatibility issues.

Video frame thumbnail photo

Add poster="{photo-url example (placeholder.png)}" to the video tag.

<video width="100%" poster="placeholder.png" controls>

Your browser does not support HTML5 video.

dynamic image background of html5 video

You need to generate thumbnails for your videos and use the thumbnail images using the poster attribute of the HTML5 video Tag.

<video width="320" height="240" poster="/images/w3html5.gif" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

You can use ffmpeg to generate thumbnails at any timeline from your videos.

---

Related Topics