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;
}

Answer 2

Hmm, since this is still open, I'd suggest taking a different approach entirely.

• Set up 4 html video objects each with the attributes you need
• Use javascript to toggle which one is visible and play it

Hope that helps!

Answer 3

Take an completely different approach.

APPROACH 1:

<video controls="controls" id="Player" height="200" width="600">
<source src="video.mp4">
<object id="Player" height=200" width="600"  classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!-- Windows Media Player Backup For IE -->
<param name="Showcontrols" value="True">
<param name="URL" value="video.mp4">
<param name="AllowShuffle" value="Yes">
<param name="autoStart" value="True">
<param name="Volume" value="100">
<param name="EnableContextMenu" value="False">
<!-- For browsers that do not support HTML5 Video -->
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player">
</object>
</video>

(The <object> tag is for IE since HTML 5 video does not always render correctly, or sometimes doesn't allow changing of video source otherwise)

• Change the source code in all browsers (except IE which doesn't allow changing src of <video> etc.) is to access document.getElementById("player").src="newvideo.mp4"

• For Internet Explorer the code is: Player.url = "newvideo.mp4"

• The only browser that may provide additional problems is Safari.

APPROACH 2: (can be used with jQuery too!)

• Place the video inside a <span id="myvideo2"> or <div id="myvideo2"> tag of its own. Make sure to give an id, for e.g. "myvideo2"
• Change the innerHTML using document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/
• Should work in all browsers