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播放器，而不适用于Flash。我正在使用基本的视频标签，让mediaelement.js做后备工作。我认为像上面的例子那样改变来源会起作用，但事实并非如此。

我希望视频停止并在选择下一张图像时切换到下一张图像，反之亦然，使用Flash播放器后退。

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

任何建议都将不胜感激。

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>

Answer 2

您不能只更改视频文件的来源。您必须删除mejs div，创建一个新的html5视频，然后再次调用mediaelement。通过重复此过程，您可以根据需要为每个视频生成新的闪回后备。

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();
    }
});

Answer 4

老帖子 - 我想加上我的决议

注意：调用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();
});

Answer 5

由于我花了很多时间才弄清楚，我会发布我在这里发现的内容。我使用了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');

Answer 6

我也会轮流重新提出一个旧问题。

我不确定MediaElement插件中是否有任何改变，但上述解决方案都没有为我100％工作，有些工作部分工作，有些工作根本没用。我面临的一些问题是，如果没有先前的视频加载和播放，我只能将视频加载到元素中，这对我来说没有用，因为它本来是用作播放列表选择器。另一个问题是无论出于什么原因，视频都不会一直加载，而只是停留几秒钟。

但是，截至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 tage帮助我格式化这样的可点击对象，同时保留在新窗口/标签功能中打开。

MediaElement.js更改视频源onclick

6 个答案: