Question

以下是该方案：

我有一个页面，其中包含使用视频设置的video元素。此视频的来源可能是包含多个来源（以及Flash后备）或YouTube视频的HTML5视频。在下面是一些用作视频缩略图的图像，点击一个应加载相应的视频，通过销毁现有的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

您可以使用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，则可以添加其他逻辑，以便仅在需要时重新初始化。适合我。

Answer 2

我遇到了同样的问题，最后在使用mediaelementplayer（）初始化视频之前存储了原始视频标记html。当我想切换视频我jQuery（“父”）。empty（）视频的父元素破坏创建的元素mediaelementjs，然后恢复原始视频html并重新初始化使用：

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

我有点hacky，但做的工作。我很想知道你是否找到了更好的方法来做到这一点？

Answer 3

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

摧毁玩家：

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

Answer 4

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

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

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

我也把这个代码变成了一个MediaElementJS插件，会有很多很好的东西，比如播放列表管理，next和prev按钮，以及播放列表面板。您可以找到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);

Answer 5

我将在这里回答我自己的问题，以解决其他可能遇到同样问题但偶然发现此问题的人。

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

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

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

5 个答案: