MediaElement.js 更改视频 onclick 的来源

Posted 2023-05-07

【中文标题】MediaElement.js 更改视频 onclick 的来源

【英文标题】：MediaElement.js Change source of video onclick

【发布时间】：2011-08-05 18:00:50

【问题描述】：

在 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 动态切换视频的文档。

任何建议将不胜感激。

【参考方案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>

【讨论】：

谢谢，伙计。这真的帮助了我。差点想放弃这个原本很酷的播放器！

【参考方案2】：

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

【参考方案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();
    
);

【参考方案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();
);

【参考方案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');

【参考方案6】：

我也会轮到我重新提出一个老问题。

我不确定 MediaElement 插件中是否发生了某些变化，但上述解决方案都没有 100% 对我有效，有些部分有效，有些根本无效。我面临的几个问题是，如果之前还没有加载和播放视频，我只能将视频加载到元素中，这对我没有好处，因为它本来是用作播放列表选择器的。另一个问题是，无论出于何种原因，视频都无法一直加载，只是停了几秒钟。

但是，截至 15 年 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 标记来帮助我格式化这样的可点击对象，还保留在新窗口/选项卡中打开的功能。