0

我目前正在开发一个使用 video.js-Library 的 Meteor 应用程序。

我有以下模板：

template(name='foo')
  .video.embed-responsive.embed-responsive-16by9
    with richMediaContent
      video#video.video-js.vjs-default-skin.vjs-big-play-centered(controls='' preload='auto')
        source(src='{{video.videoUrl}}' type='video/mp4')
        p.vjs-no-js {{i18n 'videoTagNotSupported'}}

渲染模板后初始化 video.js-Library 工作正常。

Template.foo.onRendered ->
  videojs document.getElementsByClassName('video-js')[0], {}

但是，如果使用不同的视频（使用不同的 RichMediaContent）呈现相同的模板，则不会重新初始化 videojs-Library。

我已经尝试将视频部分移动到自己的模板中并将其包含在 foo-Template 中，以便每次加载新视频时都应该调用 onRendered-Call。但这似乎不起作用。

如果视频发生变化，您知道如何重新初始化库吗？

提前致谢！

4

1 回答 1

1

新答案

实际上，当您的路线更改但使用相同的模板时，所述模板不会再次呈现，因此您的 js 插件调用不会再次触发。你可以做的是onAfterAction在你的路由定义中调用你的 js 插件：

Router.route('/video/:_id', {
  name: 'video_page',
  template: 'foo',
  // ...
  onAfterAction: function () {
    videojs document.getElementsByClassName('video-js')[0], {}
  }
});

上一个答案

我想你正在寻找全能者this.autorun。在你的 onRendered 函数的末尾，它应该看起来像这样（我用纯 javascript 输入它）

this.autorun(function () {
  var video = Session.get("video"); // reactive data
  videojs document.getElementsByClassName('video-js')[0], {}
});

这个想法是第一行必须在 autorun 函数中包含一种获取反应数据的方法。在这种情况下，我使用的是反应式的 Session。集合也是反应式的，所以另一种方式是Videos.findOne();. 这将取决于您如何获得该video元素。

这样做的作用是，每当反应数据发生变化时，回调this.autorun将再次运行，并且您的视频插件将被重置。

于 2015-04-29T15:12:43.250 回答