How to get HTML5 video thumbnail without using poster on safari or iOS?

Question

I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using \"poster\" attribute. This problem coming on Safari and iOS. I have added v

Answer 1

this is a bit late but we had the same scenario. I can't use the attribute 'muted' because my videos are podcasts. This is what I came up with and I hope to share it with future visitors. What I did is load the video in the body tag, drew a canvas, retrieved as base64 and applied to the video as the background image.

Since my video should be fixed 150px in height, I computed the aspect ratio so that whatever height and width of the actual video, it will be resized into 150px height and dynamic width.

$('body').append('');

$('body').find('.checkmeload').on('loadeddata', function(){
    var video = $('.checkmeload');

    var canvas = document.createElement('canvas');
    aspectratio = (video[0].videoWidth / video[0].videoHeight);
    newwidth = (150 * aspectratio);
    canvas.width = newwidth;
    canvas.height = 150;

    var context = canvas.getContext('2d');
    context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
    var dataURI = canvas.toDataURL('image/jpeg');

    $('body').find('.checkmeload').remove(); 

    $('#myvideo').css('background-image','url("'+dataURI +'")');
});