MediaElement.js 点击更改视频源

Question

在MediaElement.js中，我正在尝试制作一个“多功能”视频播放器。更或者说，我将根据用户点击的内容来更改缩略图的视频源。

我已经成功地为HTML5源完成了它，使用方法如下： 但是这仅适用于HTML5播放器而不是Flash回退。我正在使用基本的video标签，让mediaelement.js做回退工作。我认为像上面的示例更改源会起作用，但事实并非如此。

我希望当选择下一张图片时，视频能停止并切换到下一个视频，并且Flash播放器回退也是如此。

有没有简单的方法来做到这一点。我还没有看到如何使用Mediaelement.js动态切换视频的文档。

任何建议都将不胜感激。

- ClosDesign

Answer 1

如果您正在使用具有API的播放器，您可以使用“setSrc”方法。

示例：

<script>
var player = new MediaElementPlayer('video', {
    defaultVideoWidth: 960,
    defaultVideoHeight: 410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) {}
});

// ... sometime later

player.setSrc('urlToVid.mov');
player.play();
</script>

- Matthew Bergsma

---

谢谢，伙计。这真的帮了我很大的忙。我差点就放弃这个本来很酷的播放器了！ - Marcel

Answer 2

你不能仅仅更改视频文件的源。你需要删除mejs div，创建一个新的HTML5视频，并再次调用mediaelement。通过重复这个过程，你可以让它根据需要生成新的flash备选方案。

- Matrym

Answer 3

旧帖子 - 我想添加我的解决方案

注意：调用load()也会自动播放视频。此代码还假定您的输入已经有一个值，并且它是被点击的锚标签的子元素。

$('#idThatSwitches').click(function (e) {
    // get youTubeId
    var youTubeId = $(this).find('input[type="hidden"]').val();

    // switch out player's video source and reload
    var player = $('#idOfYourPlayer')[0].player.media;
    player.setSrc('http://youtube.com/watch?v=' + youTubeId);
    player.load();
});

- Rob Scott

Answer 4

在更改了src之后加载媒体对象对我有效...就像这样:

var player = new MediaElementPlayer('#vid'/*, Options */);        

$('#the_url').on('keypress',function(e){    
    if (e.which == 13) {
        player.pause();
        player.setSrc($('#the_url').val());        
        player.media.load();
    }
});

- bjorgvin

Answer 5

我也来回答一个老问题。

我不确定MediaElement插件是否有所改变，但以上解决方案对我来说都没有百分之百地奏效，有些部分奏效，有些则完全无法奏效。我遇到的一些问题是，只有在没有先前加载和播放的视频时，才能将视频加载到元素中，这对我来说不好，因为它应该用作播放列表选择器。另一个问题是，由于某种原因，视频无法全部加载，只会在几秒钟后停止。

然而，以下内容在2015年10月对我有效。

<a href="http://www.youtube.com/watch?v=VIDEO-ID" onclick="
  playerObject.pause();
  playerObject.setSrc(this.href);
  playerObject.media.load();
  playerObject.load();
  return false
">
<img src="yourimg">
</a>

我喜欢使用A标签来帮助我格式化可点击的对象，同时保留在新窗口/选项卡中打开的功能。

- Wobbles

Answer 6

由于我花了很多时间才弄清楚这个问题，所以我会在这里发布我找到的解决方法。我使用了MediaElementJS Wordpress插件。要更改源，您可以像这样获取媒体元素播放器的引用：

$('#wp_mep_1')[0].player.media

这样做的原因是因为在WordPress中，插件没有提供一个变量来调用像.load()或.play()这样的函数。所以，我最终发现这就是你可以获取插件插入的播放器引用的方法。

因此，要更改src：

var player = $('#wp_mep_1')[0].player.media;
if(player.setSrc)
    player.setSrc('xyz.mp4');

- Alex W