如何成功销毁 MediaElementPlayer 并创建一个新的答案

【问题标题】：How to successfully destroy a MediaElementPlayer and create a new one如何成功销毁 MediaElementPlayer 并创建一个新的
【发布时间】：2012-06-29 09:00:03
【问题描述】：

这是场景：

我有一个页面，其中包含一个设置有视频的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;

只是破坏事物:)

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

【问题讨论】：

标签： mediaelement.js

【解决方案1】：

您可以使用medialementjs的remove()方法，设置video元素的类型和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，则可以添加额外的逻辑以仅在需要时重新初始化。非常适合我。

【讨论】：

您的代码示例调用“destroy()”而不是“remove()”（mediaelement.js 不支持）

【解决方案2】：

我遇到了同样的问题，最终在使用 mediaelementplayer() 初始化视频之前存储了原始视频标签 html。当我想切换视频时，我 jQuery("parent").empty() 视频的父元素破坏了 mediaelementjs 创建的元素，然后恢复原始视频 html 并使用以下方法重新初始化：

$("#video").mediaelementplayer({
    pauseOtherPlayers: false
});

我有点老套，但能胜任。我很想知道您是否找到了更好的方法来做到这一点？

【讨论】：

【解决方案3】：

如果需要切换不同类型的视频src，需要销毁播放器，新建一个。

要摧毁玩家：

try(){
    player.pause();
    player.remove(ture);
} catch(err) {
    console.log(err);
}

【讨论】：

【解决方案4】：

我认为MediaElementJS改变当前播放的视频最好的方法不是销毁它并重新创建它，而是使用内置的视频“src”属性来改变来源。

使用 MediaElementJS API 访问此“src”属性是管理跨浏览器跨源问题（例如 YouTube 视频或 Flash 后备）的更好方法。这是我的做法：

player.pause();
player.setSrc(myNewSourceURL);
player.load();

我还把这段代码变成了一个 MediaElementJS 插件，它会带来很多不错的东西，比如播放列表管理、下一个和上一个按钮，以及一个播放列表面板。你可以找到the pullRequest on github。

这是一个构建播放列表的代码示例：

new MediaElementPlayer('#myvideo', {
    features : ['prev','playpause','next', 'progress'],
    success : function(mediaElement, domObject){
        domObject.player.loadPlaylist([
            {src: "http://domain.com/video/video1.mp4"},
            {src: "http://domain.com/video/video2.mp4"},
            {src: "http://domain.com/video/video3.mp4"},
        ]);
    }
});

然后，当点击缩略图时：

var index = 2; // calculate the item index in the playlist
player.setItem(index);

【讨论】：

当您想在 HTML5 视频源和 YouTube 视频之间切换时，这不起作用。库的创建者确认不支持这样的开关。

【解决方案5】：

我将在这里为可能遇到相同问题并偶然发现此条目的任何其他人回答我自己的问题。

事实证明，在撰写本文时，我的 MediaElementJS 不支持我想要做的事情。

我的解决方案是创建两个播放器，一个用于 HTML5/Flash 视频，另一个用于 YouTube 视频，根据需要显示和隐藏适当的一个。

【讨论】：