mediaelement.js - 如何成功销毁 MediaElementPlayer 并创建一个新的 MediaElementPlayer

Question

这是场景:

我有一个包含 video 的页面用视频设置的元素。此视频的来源可能是具有多个来源(和 Flash 后备)的 HTML5 视频或 YouTube 视频。
在这下面是许多用作视频缩略图的图像，单击其中一个应该加载适当的视频，方法是销毁现有的 MediaElementPlayer 并在同一个 video 上创建一个新的。元素。

这会在页面加载时创建初始播放器:

$('video').mediaelementplayer({ alwaysShowControls: true });

这旨在在单击其中一张图像时更改播放器:

$('video').mediaelementplayer({
   alwaysShowControls: true,
   success: function(media, dom, player) {
      console.log('success!');
   },
   error: function() {
      console.log('error!');
   }
});

但它不起作用。 success函数从未被输入(也不是 error )并且似乎什么也没发生。

我猜图书馆仍然认为原始播放器存在或其他东西，并且已经尝试了很多事情来尝试告诉它事实并非如此，例如:

mejs.meIndex = 0
mejs.players = []

没有效果，并设置:

window.mejs = null;
window.MediaElementPlayer = null;
window.MediaElement = null;

只是打破了事情:)

任何人都可以帮忙吗？我确定我在这里遗漏了一些简单的东西，所以如果有人能指出什么，我将不胜感激!提前致谢。

Answer 1

您可以使用 remove() medialementjs 的方法，设置你的 video 的 type 和 src 属性元素，然后如果视频类型已更改，则重新初始化 mediaelementjs。

可能看起来像这样:

function setSource(url, type) {
    var vid = $('#video').first();
    if (vid.attr('type') != type) {
        vid.get(0).player.remove();
        vid.attr('type', type).attr('src', url);
        vid.mediaelementplayer({
            success: function(media, dom, player) {
                player.play();
            }
        })

    }
}

如果您不仅拥有 mp4 和 youtube，您还可以添加额外的逻辑以仅在需要时重新初始化。非常适合我。