MediaElement.js更改视频onclick的来源

| 在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进行后备工作。我以为像上面的示例那样更改源将有效，但无效。我希望视频停止播放，并在选择下一个图像时切换到下一个图像，反之亦然。是否有捷径可寻。我还没有看到太多有关如何使用Mediaelement.js素材动态切换视频的文档。任何建议将不胜感激。

已邀请:

6 个回复

版萍层分

如果将播放器与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>

谦响局豢报

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

戊袱

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

了驳

旧帖子-想我会添加我的决议注意：呼叫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();
});

咳累录酬

由于这花了我很多时间，因此我将在此发布发现的内容。我使用了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\');

闪脖

我也将轮流重新提出一个老问题。我不确定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>

我喜欢使用Atage来帮助我格式化可单击对象，例如这样，还可以在新的窗口/选项卡功能中保留打开状态。

要回复问题请先登录或注册

MediaElement.js更改视频onclick的来源

6 个回复

发起人

mediaelement.js

问题状态

MediaElement.js更改视频onclick的来源

与内容相关的链接

6 个回复

发起人

mediaelement.js

问题状态