5

这是场景：

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

只是打破东西:)

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

4

5 回答 5

2

您可以使用remove()mediaelementjs 的方法，设置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，则可以添加其他逻辑以仅在需要时重新初始化。非常适合我。

于 2013-08-25T20:47:45.340 回答
1

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

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

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

于 2012-07-30T02:12:08.867 回答
1

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

摧毁玩家：

try(){
    player.pause();
    player.remove(ture);
} catch(err) {
    console.log(err);
}
于 2015-01-30T05:05:28.023 回答
0

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

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

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

于 2012-11-30T09:02:13.860 回答
0

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

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

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

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

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

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);
于 2012-11-29T08:53:22.320 回答