MediaElement.js更改视频来源onclick

Question

在MediaElement.js中，我正在尝试制作一个“多”视频播放器。或多或少我会让缩略图根据用户点击的内容来改变视频的来源。

对于HTML5源代码，我已经成功地使用

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

但这只适用于HTML5播放器，而不适用于闪存回退。我使用了基本的视频标签，并让mediaelement.js来做后备工作。我以为像上面的例子一样改变源代码会行得通，但它不是。

我希望视频停止并切换到下一个图像时，下一个图像被选中，反之亦然，与Flash播放器回退。

有没有一个简单的方法可以做到这一点。我还没有看到太多关于如何使用Mediaelement.js动态切换视频的文档。

任何建议都将不胜感激。

Answer 1

如果您使用的是带有接口的播放器，可以使用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>

Answer 2

你不能仅仅改变视频文件的来源。您必须删除mejs div，创建一个新的html5视频，然后再次对其调用mediaelement。通过重复此过程，您可以让它在必要时为每个视频生成一个新的flash回退。

Answer 3

对于我来说，在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();
    }
});