Mediaelement.js:如何更改海报图像

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

本文关键字：海报 图像 何更改 js Mediaelement      更新时间：2023-09-26

我正在尝试通过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故障进行更新。我试着只是更改视频元素上的海报属性，但似乎没有效果。

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

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

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

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

希望能有所帮助！

采用完全不同的方法。

方法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，因为HTML5视频并不总是正确呈现，或者有时不允许更改视频源）

  • 在所有浏览器中更改源代码（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，例如"myvideo2"
  • 使用document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/更改innerHTML
  • 应适用于所有浏览器
相关文章：