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播放器,而不适用于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。通过重复此过程，您可以根据需要为每个视频生成新的 Flash 回退。