Mediaelement.js：如何更改海报图片？答案

【问题标题】：Mediaelement.js: how do I change the poster image?Mediaelement.js：如何更改海报图片？
【发布时间】：2012-03-03 01:46:03
【问题描述】：

我正在尝试通过 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 后备进行更新。我尝试只更改视频元素上的海报属性，但似乎没有这样做。

【问题讨论】：

标签： javascript mediaelement.js

【解决方案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;
}

【讨论】：

setTimeout 延迟是必要的还是只是对浏览器“友好”？（你已经说过两次border: 0;。）这看起来很轻，它应该可以工作。回到我写这个问题的时候，我想我已经假设海报图像将是 Flash/Silverlight 的一部分（当 HTML 视频不可用时），因此替换 HTML 将没有用。但现在我更多地考虑它，它似乎是一个 HTML 元素，而不是在 Flash/Silverlight 中。你能证实吗？（我需要这个的项目早已不复存在。）
谢谢，我已编辑删除重复的border: 0;。我发现如果没有setTimeout，pause 方法将没有时间在源更改之前完全执行和渲染。通过将setTimeout 包含在其中的所有内容都将在渲染/重绘任务之后添加到浏览器执行队列中，因此大播放按钮应该正确显示。

【解决方案2】：

嗯，由于这仍然是开放的，我建议完全采取不同的方法。

设置 4 个 html 视频对象，每个对象都具有您需要的属性
使用 javascript 切换哪个可见并播放它

希望有帮助！

【讨论】：

【解决方案3】：

采取完全不同的方法。

方法 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>

（<object> 标签用于 IE，因为 HTML 5 视频并不总是正确呈现，或者有时不允许更改视频源）

在所有浏览器中更改源代码（除了IE不允许更改<video>等的src）是访问document.getElementById("player").src="newvideo.mp4"
对于 Internet Explorer，代码为：Player.url = "newvideo.mp4"
唯一可能会带来额外问题的浏览器是 Safari。

方法2：（也可以与jQuery一起使用！）

将视频放在自己的<span id="myvideo2"> 或<div id="myvideo2"> 标记中。确保提供一个 id，例如“我的视频2”
使用document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/更改innerHTML
应该适用于所有浏览器

【讨论】：