javascript - Mediaelement.js:如何更改海报图片？

Question

我正在尝试通过 JS 更改视频源。这主要是工作。

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"}
]);

所以第一个问题:当我更改源时，暂停按钮显示而不是播放，并且大覆盖播放按钮不显示，即使它已暂停。我已经尝试在 setSrc 调用之前和之后发送 stop() 和 pause() 以及 setCurrentTime(0) 的各种组合，但没有成功。

更重要的问题:我还没有找到改变视频海报图片的方法。我期待在 API 中看到一种方法来更改它，因为我希望它也针对 Flash/Silverlight 回退进行更新。我尝试只更改视频元素上的海报属性，但似乎没有成功。

Answer 1

我知道这是一个相当古老的问题，但我想我会发布对我有用的答案。

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

这里很好地解释了 setTimeout 的作用:https://stackoverflow.com/a/779785/1425269 .

您可能还需要一些用于海报图像的 CSS，具体取决于您使用的主题。

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