How to Get HTML5 Video Thumbnail Without Using Poster on Safari or iOS

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

HTML5 Video poster attribute in Safari and Chrome

It seems that WebKit strips the attribute as soon as the video is fethced, because iOS 3.x for Iphone and Ipad has a serious bug where it is not possible to play the video at all when there is a poster attribute specified. This was fixed in iOS 4, but the workaround still stays, even in Safari 5...There are a lot of users who didn't upgrade to iOS 4 yet, so no luck with the poster...

I'm going to try and position the image absolutely over the video using Javascript, and removing it when the video is played - that seems like the best solution...

---

Related Topics