Mediaelement.js: how do I change the poster image?

Question

I'm trying to change the video sources via JS. That's mostly working.

var basename = "video/whatever";
$("#myvideo")[0].setSrc([
    {type: "video/mp4", src: basename + ".mp4"},
    {type: "video/webm", src: basename + ".webm"},
    {type: "video/ogg", src: basename + ".ogv"}
]);

So first problem: when I change the sources the pause button shows rather than play and the big overlay play button does not show, even though it is paused. I've tried sending various combinations of stop() and pause() and setCurrentTime(0) before and after the setSrc call but no luck.

More important problem: I haven't found a way to change the poster image of the video. I was expecting to see a method in the API to change it, since I want it to update for the Flash/Silverlight fallbacks too. I tried just changing the poster attribute on the video element but that doesn't seem to do it.

Answer 1

I know this is a fairly old question but I thought I would post the answer that worked for me.

var basename = "video/whatever";
// Where videoPlayer is the video element.
if(!videoPlayer.paused) {
    videoPlayer.pause();
}
setTimeout(function(){
    // Set poster image
    $('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show();

    // Set video source
    videoPlayer.setSrc([
        {type: "video/mp4", src: basename + ".mp4"},
        {type: "video/webm", src: basename + ".webm"},
        {type: "video/ogg", src: basename + ".ogv"}
    ]);
}, 0);

Here's a good explanation of what the setTimeout is doing: https://stackoverflow.com/a/779785/1425269.

You might also need some css for the poster image, depending what theme you are using.

.mejs-poster img {
    padding: 0;
    border: 0;
    width: 100%;
    height: auto;
}